微信小程序首页的分类功能和搜索功能的实现思路及代码详解
|
就在昨天，微信宣布了微信小程序开发者工具新增“云开发”功能 下载最新的开发者工具，现在无需服务器即可实现小程序的快速迭代！ 分类功能和搜素功能的效果图
1.首页分类功能的实现boxtwo方法（.js文件） 当在首页点击 分类导航时，会触发这个方法，并传回当前点击时的index值。 这个方法实现的是将.wxml文件传来的index值赋给HomeIndex。
.wxss样式文件 这样就实现了首页 当前点击的分类 呈现出 被选中的样式。 然后在视图层根据HomeIndex的不同，加载对应的数据。
detail.js文件 }
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.wxml（首页）完整代码 index.wxss（对应的样式文件） .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
})
},
总结以上所述是小编给大家介绍的微信小程序首页的分类功能和搜索功能的实现思路及代码详解。编程之家 52php.cn 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
