下载最新的开发者工具，现在无需服务器即可实现小程序的快速迭代！
1.首页分类功能的实现
Boxtwo: function (e) {
var index = parseInt(e.currentTarget.dataset.index)
this.setData({
HomeIndex: index
})
},
当在首页点击 分类导航时，会触发这个方法，并传回当前点击时的index值。
这个方法实现的是将.wxml文件传来的index值赋给HomeIndex。
class="Boxtwo-tab-nav {{HomeIndex == 0 ?'on':''}}"
.wxss样式文件
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
}
然后在视图层根据HomeIndex的不同，加载对应的数据。
detail.js文件
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
})
}
})
}
2.搜索功能的实现
.wxml文件
JavaScript indexOf() 方法
indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
key为搜索的关键字，res.data[i].title为首页列表的标题。使用indexOf()方法时，当满足了(res.data[i].title.indexOf(key) >= 0）说明说明输入的关键字在文章列表中
也有相同的关键字，然后arr.push(res.data[i])，这样就把筛选出来的文章放在了临时数组arr中了
= 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);
}
index.wxss（对应的样式文件）
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;
}
.js文件（逻辑层）
= 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
})
},
总结
以上所述是小编给大家介绍的微信小程序首页的分类功能和搜索功能的实现思路及代码详解。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
