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

  • 内容
  • 相关
这篇文章主要介绍了微信小程序实现搜索功能并跳转搜索结果页面,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

91F6072F-C872-42FA-9C37-4FA65BAB40CB.jpeg

本文实例为大家分享了微信小程序实现搜索功能,并跳转搜索结果页面,供大家参考,具体内容如下

搜索页面:

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)

},

以上就是本文全部内容,转载自脚本之家

访问原文地址可复制该页内容!

原文地址:http://pengsirs.com/post-14.html

本文标签:

版权声明:若无特殊注明,本文皆为《彭Sir》原创,转载请保留文章出处。

本文链接:小程序实现搜索功能并跳转搜索结果页面 - http://pengsirs.com/post-14.html

收录状态:[坐等百度收录][等待360收录][搜狗已收录]

上一篇:小程序实现下拉刷新动画 下一篇:没有了哟
网站备案相关信息
域名 pengsirs.com
主办方名称 彭松
主办单位性质 个人
主体备案号 鄂ICP备19010459号
ICP备案号 鄂ICP备19010459号-1
首页地址 http://pengsirs.com/ [备案查询]
网站名称 遇上更好的你
审核时间 2019/4/24 0:00:00