微信小程序实现搜索功能并跳转搜索结果页面

OGeek|极客世界-中国程序员成长平台 › 门户 › 编程› JavaScript›JavaScript编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

搜索页面：

search.wxml页面：

    <view class="form">
      <input class="searchInput" value='{{keyWord}}' bindconfirm='goSearch' placeholder="请输入搜索关键字" type="text" />
    </view>

search.wxss样式：

.form {
  position: relative;
  height: 40px;
}
 
.searchInput {
  border: 1px solid #2c3036;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  border-radius: 20px;
  color: #bebec4;
  padding-left: 35px;
}

search.js:

  // 搜索
  goSearch: function(e) {
    var that = this;
    var formData = e.detail.value;
    if (formData) {
 
      wx.request({
 
        url: 'https://xxxxx/homepage/search',
        data: {
          title: formData
        },
 
        header: {
          'Content-Type': 'application/json'
        },
        success: function(res) {
          that.setData({
            search: res.data,
          })
          if (res.data.msg=='无相关视频'){
            wx.showToast({
              title: '无相关视频',
              icon: 'none',
              duration: 1500
            })
          }else{
            let str = JSON.stringify(res.data.result.data);
            wx.navigateTo({
              url: '../searchShow/searchShow?data=' + str
            })
          }
          
          // console.log(res.data.msg)
        }
      })
    } else {
 
      wx.showToast({
        title: '输入不能为空',
        icon: 'none',
        duration: 1500
      })
 
    }
  }

搜索结果：

searchShow.wxml页面：

<view class="container">
  <view class="listBox" wx:for="{{searchShow}}" wx:key="{{item.id}}">
    <view class="listMain">
      <navigator url='../videoShow/videoShow?id={{item.id}}'>
        <image src="{{item.image}}" mode="widthFix"></image>
        <view class='listTitle'>
          <view class="listSubtitle">
            <text>{{item.title}}</text>
          </view>
          <view class="listText">
            <text>{{item.decription}}</text>
          </view>
        </view>
      </navigator>
    </view>
  </view>
</view>

searchShow.js

  onLoad: function(options) {
    let searchShow = JSON.parse(options.data);
    let that = this
    that.setData({
      searchShow: searchShow
    })
    console.log(searchShow)
  },

到此这篇关于微信小程序实现搜索功能并跳转搜索结果页面的文章就介绍到这了,更多相关小程序实现搜索并跳转内容请搜索极客世界以前的文章或继续浏览下面的相关文章希望大家以后多多支持极客世界！