微信小程序首页的分类功能和搜索功能的实现思路及代码详解

boxtwo: function (e) {  var index = parseInt(e.currentTarget.dataset.index)  this.setData({   HomeIndex: index  }) },

.boxtwo-tab-nav{display: inline-block;width: 20%;height: 90rpx;line-height: 90rpx;border-bottom: 1rpx solid #ededed;box-sizing: border-box;text-align: center;color: black;font-size: 30rpx}

<view wx:if="{{HomeIndex == 1}}" >  <block wx:for="{{shareList}}" wx:key="*this"> <navigator url='../../pages/shareDetail/shareDetail?id={{item.id}}' hover-class="navigator-hover">   <view class='imgs'>    <image src="{{item.img}}" background-size="cover" mode="scaleToFill"></image>   </view>   <view class='infos'>    <view class="title">{{item.title}}</view>    <view class="date">{{item.cTime}}</view>   </view>  </navigator></block> </view>

onLoad: function (options) {  var that = this  wx.request({   url: 'http://localhost:81/weicms/index.php?s=/addon/School/School/getDetail',   data: {id:options.id},   header: {    'content-type': 'application/json'   },   success: function (res) {    wx.setStorage({     key: 'info',     data: res.data,    })    that.setData({     info: res.data    })   }  })  }

<view class='search-view'>  <input class='input' confirm-type="search" maxlength="30" bindinput='wxSearchInput' value='{{keyword}}' bindconfirm='wxSearchFn' bindfocus="wxSerchFocus" bindblur="wxSearchBlur" placeholder='请输入搜索内容'></input>  <button class='search' bindtap="wxSearchFn" hover-class='button-hover'>搜索</button></view>

//搜索方法 key为用户输入的查询字段 search: function (key) {  /*console.log('搜索函数触发')*/  var that = this;  var newsList = wx.getStorage({   key: 'newsList',   success: function (res) {//从storage中取出存储的数据*/   /*console.log(res)*/    if (key == '') {//用户没有输入 全部显示     that.setData({      newsList: res.data     })     return;    }    var arr = [];//临时数组 用于存放匹配到的数据    for (let i in res.data) {     if (res.data[i].title.indexOf(key) >= 0) {//查找      arr.push(res.data[i])     }    }    if (arr.length == 0) {     that.setData({      newsList:[]     })    } else {     that.setData({      newsList: arr//在页面显示找到的数据     })    }   }  })  }//搜素时触发，调用search: function (key)，传入输入的e.detail.value值wxSearchInput: function (e) { this.search(e.detail.value);}

<view class='search-view'>  <input class='input' confirm-type="search" maxlength="30" bindinput='wxSearchInput' value='{{keyword}}' bindconfirm='wxSearchFn' bindfocus="wxSerchFocus" bindblur="wxSearchBlur" placeholder='请输入搜索内容'></input>  <button class='search' bindtap="wxSearchFn" hover-class='button-hover'>搜索</button></view><view class="boxtwo-tab-nav {{HomeIndex == 0 ?'on':''}}" bindtap="boxtwo" data-index="0">首页</view>  <view class="boxtwo-tab-nav {{HomeIndex == 1 ?'on':''}}" bindtap="boxtwo" data-index="1">资源分享</view>  <view class="boxtwo-tab-nav {{HomeIndex == 2 ?'on':''}}" bindtap="boxtwo" data-index="2">微信小程序</view>   <view class="boxtwo-tab-nav {{HomeIndex == 3 ?'on':''}}" bindtap="boxtwo" data-index="3">网赚小项目</view><view class="boxtwo-tab-nav {{HomeIndex == 4 ?'on':''}}" bindtap="boxtwo" data-index="4">共享经济</view><view class="wrap"> <template name="lists">  <navigator url='../../pages/detail/detail?id={{id}}' hover-class="navigator-hover">   <view class='imgs'>    <image src="{{img}}" background-size="cover" mode="scaleToFill"></image>   </view>   <view class='infos'>    <view class="title">{{title}}</view>    <view class="date">{{cTime}}</view>   </view>  </navigator> </template></view><view wx:if="{{HomeIndex == 0}}"><block wx:for="{{newsList}}" wx:key="*this"> <template is="lists" data="{{...item}}"/></block></view> <view wx:if="{{HomeIndex == 1}}" >  <block wx:for="{{shareList}}" wx:key="*this"> <navigator url='../../pages/shareDetail/shareDetail?id={{item.id}}' hover-class="navigator-hover">   <view class='imgs'>    <image src="{{item.img}}" background-size="cover" mode="scaleToFill"></image>   </view>   <view class='infos'>    <view class="title">{{item.title}}</view>    <view class="date">{{item.cTime}}</view>   </view>  </navigator></block> </view> <view wx:if="{{HomeIndex == 2}}" >   <block wx:for="{{weixinList}}" wx:key="*this"> <navigator url='../../pages/weixinDetail/weixinDetail?id={{item.id}}' hover-class="navigator-hover">   <view class='imgs'>    <image src="{{item.img}}" background-size="cover" mode="scaleToFill"></image>   </view>   <view class='infos'>    <view class="title">{{item.title}}</view>    <view class="date">{{item.cTime}}</view>   </view>  </navigator> </block> </view> <view wx:if="{{HomeIndex == 3}}" >   <block wx:for="{{netearnList}}" wx:key="*this"> <navigator url='../../pages/netearnDetail/netearnDetail?id={{item.id}}' hover-class="navigator-hover">   <view class='imgs'>    <image src="{{item.img}}" background-size="cover" mode="scaleToFill"></image>   </view>   <view class='infos'>    <view class="title">{{item.title}}</view>    <view class="date">{{item.cTime}}</view>   </view>  </navigator> </block> </view> <view wx:if="{{HomeIndex == 4}}" > <block wx:for="{{economyList}}" wx:key="*this"> <navigator url='../../pages/economyDetail/economyDetail?id={{item.id}}' hover-class="navigator-hover">   <view class='imgs'>    <image src="{{item.img}}" background-size="cover" mode="scaleToFill"></image>   </view>   <view class='infos'>    <view class="title">{{item.title}}</view>    <view class="date">{{item.cTime}}</view>   </view>  </navigator> </block> </view>

.wrap{ height: 100%; display:flex; flex-direction: column; padding: 20rpx}navigator{overflow: hidden}.list{ margin-bottom: 20rpx; height: 200rpx; position: relative;}.imgs{ float: left;}.imgs image{ display: block; width: 210rpx; height: 180rpx;}.boxtwo-tab-nav{  display: inline-block;  width: 20%;  height: 90rpx;  line-height: 90rpx;  border-bottom: 1rpx solid #ededed;  box-sizing: border-box;  text-align: center;  color: black;  font-size: 30rpx}.on{  color:#405F80;  border-bottom: 5rpx solid #405F80;}.infos{ float: left; width: 480rpx; height: 200rpx; padding: 20rpx 0 0 20rpx;}.date{ font-size:13px;color:#aaa;position: absolute;}.title{font-size: 15px;}.search{ float: left; width: 130rpx; height: 70rpx; margin-left: 0; background-color: blueviolet; font-size: 28rpx; color: #fff; border: none;}.input{ float: left; width: 500rpx; height: 70rpx; font-size: 35rpx; background-color: white;}.search-view{ position: relative; overflow: hidden; height: 70rpx; padding: 20rpx 20rpx 25rpx 60rpx; background-color: #6699FF;}.button-hover { background-color: red;}

Page({ data:{  newsList:[],  HomeIndex: 0 }, onLoad: function () {  var that = this;  wx.request({   url: 'http://localhost:81/weicms/index.php?s=/addon/School/School/getList',   data: {},   header: {    'content-type': 'application/json'   },   success: function (res) {    console.log(res.data)    wx.setStorage({     key: 'newsList',     data: res.data,    })    that.setData({     newsList: res.data    })   }  })  wx.request({   url: 'http://localhost:81/weicms/index.php?s=/addon/Share/Share/getList',   data: {},   header: {    'content-type': 'application/json'   },   success: function (res) {    wx.setStorage({     key: 'sharesList',     data: res.data,    })    that.setData({     shareList: res.data    })   }  })  wx.request({   url: 'http://localhost:81/weicms/index.php?s=/addon/Weixin/Weixin/getList',   data: {},   header: {    'content-type': 'application/json'   },   success: function (res) {    wx.setStorage({     key: 'weixinList',     data: res.data,    })    that.setData({     weixinList: res.data    })   }  })  wx.request({   url: 'http://localhost:81/weicms/index.php?s=/addon/Netearn/Netearn/getList',   data: {},   header: {    'content-type': 'application/json'   },   success: function (res) {    wx.setStorage({     key: 'netearnList',     data: res.data,    })    that.setData({     netearnList: res.data    })   }  })  wx.request({   url: 'http://localhost:81/weicms/index.php?s=/addon/Economy/Economy/getList',   data: {},   header: {    'content-type': 'application/json'   },   success: function (res) {    wx.setStorage({     key: 'economyList',     data: res.data,    })    that.setData({     economyList: res.data    })   }  }) }, //搜索方法 key为用户输入的查询字段 search: function (key) {  /*console.log('搜索函数触发')*/  var that = this;  var newsList = wx.getStorage({   key: 'newsList',   success: function (res) {//从storage中取出存储的数据*/   /*console.log(res)*/    if (key == '') {//用户没有输入 全部显示     that.setData({      newsList: res.data     })     return;    }    var arr = [];//临时数组 用于存放匹配到的数据    for (let i in res.data) {     if (res.data[i].title.indexOf(key) >= 0) {//查找      arr.push(res.data[i])     }    }    if (arr.length == 0) {     that.setData({      newsList:[]     })    } else {     that.setData({      newsList: arr//在页面显示找到的数据     })    }   }  })  }, //事件处理函数 bindViewTap: function() {  wx.navigateTo({   url: '../logs/logs'  }) }, wxSearchInput: function (e) { this.search(e.detail.value); console.log(e.detail.value) }, wxSerchFocus: function (e) {  this.search(e.detail.value); }, wxSearchBlur: function (e) {  this.search(e.detail.value); }, wxSearchFn: function (e) {  /*console.log(e)*/ }, boxtwo: function (e) {  var index = parseInt(e.currentTarget.dataset.index)  this.setData({   HomeIndex: index  }) },