微信小程序关键字搜索

首先是在搜索页面获取到关键字，之后作为请求参数wx.request进行请求与数据处理

在util.js内获取到所有数据之后，在众多数据中通过RegExpObject.test(string)实现关键字的遍历匹配

 //util.jsif (data.hasOwnProperty('key')) { //如果请求参数是keyconst media = res.data;for (let i in media) { //遍历匹配电影名for (let j in media[i]) {var re = new RegExp(data.key);if (re.test(media[i][j].title)) {returnRes.push(media[i][j]); //得到匹配好的电影}}}resolve(returnRes)return;}resolve(returnRes)

搜索页面使用wx.request得到数据之后，搜索结果列表一项一项就可以显示出来。重点是(敲黑板),一般来说点击哪一项，在搜索结果页面那一项就会排在最上面，那我就想要不然再建一个由点击的的那一项作为第一项的查询结果数组，将它存在本地然后在下一个页面取出并显示！

 //search.jsclickResult: function(e) {let index = e.currentTarget.dataset.num; //点击了第几项let searchVal = this.data.searchVal; //关键词let StorageResult = []; // 用于存在本地的数组let temp = [];const result = this.data.result;for (let i = 0; i < result.length; i++) {if (i == index) {temp = result.splice(i, 1); //取出点击的那一项}}StorageResult = temp;for (let i in result) {StorageResult = [...StorageResult, result[i]] //将点击的那一项作为数组首位，其他搜索结果再依次放入}wx.setStorage({ //在本地缓存搜索结果key: 'searchResult',data: StorageResult,success: function(res) {wx.navigateTo({url: `search-result/search-result?key=${searchVal}` //跳转到下一个页面})}})}

另外，搜索结果会顺带把集数罗列出来，那就需要实现点哪集就在视频详情页定位到哪集的功能

先在wxml里通过data-把id、集数、标题传到下一个页面，在onload里头获取集数

  //video-detail.jsonLoad: function(option) {this.setData({video_id: option.id,mediaList: null,})wx.setNavigationBarTitle({ //设置导航条名称title: option.title})if (option.hasOwnProperty('num')) { //调用请求资源方法传入集数this.requestVideo(option.num);} else {this.requestVideo();}}

请求所有视频资源之后并遍历，把当前播放地址设为选中的那集

  requestVideo: function(num = 0) { //没有选择集数，则集数默认是0util.request({...(略)}).then(res => {this.setData({mediaList: res,isLoading: false,playerUrl: res.drama_num[num].video_url //修改播放地址})this.pickNum(num); //改变集数选择状态})}

用于改变集数选择状态

  pickNum: function(num) {for (let i of mediaList.drama_num) {i.selected = parseInt(i.drama_id) === parseInt(num) + 1 //如果选择的集数与视频资源的id一样就改变该集的选中状态if (i.selected) {playerUrl = i.video_url}}this.setData({mediaList,playerUrl})}

微信小程序关键字搜索相关推荐

微信小程序的搜索和重置功能
微信小程序的搜索和重置功能 wxml <template><div><div class="input-wrap"><el-inputse ...
微信小程序自定义搜索框（searchbar）
微信小程序自定义搜索框(searchbar) 样式截图展示: 功能描述:微信小程序页面需要加入搜索框时,可以直接引用到页面中使用,当用户未输入任何关键字时如第一张图所示,当用户输入要搜索的关键字时如第 ...
微信小程序页面搜索框查询（无后台接口情况下）
微信小程序页面搜索框查询(无后台接口情况下) 效果图: wxml <view class="container"><view class="goodsl ...
微信小程序微信小程序地图搜索、地图搜索点点击出callout气泡标题说明
实现效果:根据楼盘名称实现地图定位.周边搜索: 代码: html <view class="mapinfo"><view class="mapbd&qu ...
原生微信小程序，搜索框（search）组件
原生微信小程序,搜索框(search)组件首先创建组件及两个跳转页面,第一个是搜索框所在的页面(首页),第二个是搜索详细页搜索框的本质是:搜索框不是input,而是navigate,跳转到专门的搜 ...
微信小程序顶部搜索框滑动伸缩效果的实现
项目场景:微信小程序顶部搜索框随页面滑动伸缩效果提示:实现搜索框跟随用户滑动页面,实现伸缩效果微信小程序顶部搜索框滑动伸缩动画的实现实现效果: 滑动前滑动后实现原理提示:主要用到了微信小 ...
微信小程序input搜索解决中文问题(输入拼音) 实时搜索节流处理(bindinput 节流)
微信小程序input搜索解决中文问题(输入拼音) & 实时搜索节流处理(bindinput 节流) 问题微信小程序输入拼音的时候, 还没有完全输入完成, bindinput就会触发, 当我输 ...
微信小程序实时搜索并高亮关键字
微信小程序实现实时搜索并高亮关键字的功能效果一.效果图二.实现流程: 1.在文本框中输入关键字key,如"比赛",检索出比赛相关的列表 key = 小程序 2.处理结果列表:在 ...
微信小程序自定义搜索标题栏
一:需求把微信小程序标题栏处变成搜索栏. 自定义返回上级页面. 二:需求分析首先要把小程序标题栏设置为可自定义. 然后计算原标题栏的高度组成结构. 根据计算高度设置搜索框和返回按钮的布局. 最后进 ...
微信小程序实现搜索关键词高亮
目录 1,前言 2,思路 3,代码逻辑 1,前言项目中碰到一个需求,搜索数据并且关键词要高亮显示,接到需求,马上开干.先上效果图.源码已经做成了小程序代码片段,放入了GitHub了,文章底部有源码链 ...

微信小程序关键字搜索

微信小程序关键字搜索相关推荐

最新文章

热门文章