2023年7月9日发(作者：)

微信⼩程序⾸页的分类功能和搜索功能的实现思路及代码详解就在昨天，微信宣布了微信⼩程序开发者⼯具新增“云开发”功能下载最新的开发者⼯具，现在⽆需服务器即可实现⼩程序的快速迭代！分类功能和搜素功能的效果图1.⾸页分类功能的实现boxtwo⽅法（.js⽂件）boxtwo: function (e) { var index = parseInt() a({ 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的不同，加载对应的数据。 {{}} {{}} 组件实现的是点击当前⽂章时传出id到详情页⾯（detail）。这样就把⾸页的⽂章列表和⽂章的详情页⾯⼀⼀对应起来了。⽂件onLoad: function (options) { var that = this t({ url: 'localhost:81/weicms/?s=/addon/School/School/getDetail', data: {id:}, header: { 'content-type': 'application/json' }, success: function (res) { rage({ key: 'info', data: , }) a({ info: }) } })

}2.搜索功能的实现.wxml⽂件 搜索JavaScript indexOf() ⽅法 indexOf() ⽅法可返回某个指定的字符串值在字符串中⾸次出现的位置。key为搜索的关键字，[i].title为⾸页列表的标题。使⽤indexOf()⽅法时，当满⾜了([i].f(key) >= 0）说明说明输⼊的关键字在⽂章列表中也有相同的关键字，然后([i])，这样就把筛选出来的⽂章放在了临时数组arr中了//搜索⽅法 key为⽤户输⼊的查询字段 search: function (key) { /*('搜索函数触发')*/ var that = this; var newsList = rage({ key: 'newsList', success: function (res) {//从storage中取出存储的数据*/ /*(res)*/ if (key == '') {//⽤户没有输⼊ 全部显⽰ a({ newsList: }) return; } var arr = [];//临时数组 ⽤于存放匹配到的数据 for (let i in ) { if ([i].f(key) >= 0) {//查找 ([i]) } } if ( == 0) { a({ newsList:[] }) } else { a({ newsList: arr//在页⾯显⽰找到的数据 }) } } }) }//搜素时触发，调⽤search: function (key)，传⼊输⼊的值wxSearchInput: function (e) { ();}（⾸页）完整代码 搜索⾸页 资源分享 微信⼩程序 ⽹赚⼩项⽬共享经济