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

最新推荐文章于 2024-07-17 10:58:00 发布

ZhangXD_BLOG

最新推荐文章于 2024-07-17 10:58:00 发布

阅读量1.5w

点赞数 6

本文链接：https://blog.csdn.net/u012054869/article/details/87095427

版权

搜索页面：

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