当前位置:主页 > 网页前端 > JavaScript代码 >

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

时间:2022-03-24 11:36:12 | 栏目:JavaScript代码 | 点击:

搜索页面:

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

您可能感兴趣的文章:

相关文章