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

柔光的暖阳◎ 2022-03-20 11:10 372阅读 0赞

**搜索页面：**

search.wxml页面：

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)
      },