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

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

浏览量:2175 时间: 来源:ZhangXD_BLOG

搜索页面:

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

 

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎