就在昨天，微信宣布了微信小程序开发者工具新增"云开发"功能

下载最新的开发者工具，现在无需服务器即可实现小程序的快速迭代！

分类功能和搜素功能的效果图

1.首页分类功能的实现

盒子二方法(.射流研究…文件)

boxtwo:函数(e){ var index=parent(e . CurrentTarget。数据集。索引)这个。setdata({ HomeIndex : index })}，当在首页点击分类导航时，会触发这个方法，并传回当前点击时的指数值。

这个方法实现的是将。页面结构文件传来的指数值赋给家庭索引。

class=' box two-tab-nav { { HomeIndex==0 '？在":"} }上。页面样式表样式文件。box two-tab-nav { display : inline-block；宽度： 20%;高度： 90 rpx线高： 90 rpx边框-底部： 1rpx实心# ededed盒子尺寸：边框盒子；文本对齐：中心；颜色：黑色；font-size: 30rpx}这样就实现了首页当前点击的分类呈现出被选中的样式。

然后在视图层根据家庭索引的不同，加载对应的数据。

查看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=“http : ”{ { item。img } } ' background-size=' cover ' mode=' scaleToFill '/image/view class=' infos ' view class=' title ' { item。title } }/view view view class=' date ' { item。ctime } }/视图/视图/导航器/块/视图导航器/导航器组件实现的是点击当前文章时传出编号到详情页面（细节).这样就把首页的文章列表和文章的详情页面一一对应起来了。

详细信息。射流研究…文件

onLoad:函数（选项){ var=this wx。请求({ URL : ' http://localhost :81/Wei CMS/index。PHP？s=/addon/School/getDetail '，data: {id:options.id}，header : { ' content-type ' : ' application/JSON ' }，success : function(RES){ wx。setstorage({ key : ' info '，data: res.data，})该。setdata({ info : RES . data })})2).搜索功能的实现。页面结构文件

view class=' search-view ' input class=' input ' confirm-type=' search ' maxlength=' 30 ' bind input=' wxSearchInput ' value=' { { key } } ' bind confirm=' wxSearchFn ' bind focus=' wxSearchBlur '占位符='请输入搜索内容/input button class=' search ' bind tap=' wxSearchFn ' hover-class=' button-hover '搜索/button/viewJavaScript indexOf()方法

indexOf()方法可返回某个指定的字符串值在字符串中首次出现的位置。

键为搜索的关键字，res.data[i].标题为首页列表的标题。使用indexOf()方法时，当满足了(研究数据[一])。标题。indexof(键)=0)说明说明输入的关键字在文章列表中

也有相同的关键字，然后arr.push(res.data[i])，这样就把筛选出来的文章放在了临时数组到达)中了

//搜索方法键为用户输入的查询字段search:函数（键){ /*console.log('搜索函数触发)那=thisvar新闻列表=wx。getstorage({ key : ' news list '，success: function (res) {//从仓库中取出存储的数据*//*控制台。log(RES)*/if(key==' '){//用户没有输入全部显示那个。setdata({ news list : RES . data })返回；} var arr=[]；//临时数组用于存放匹配到的数据for(让I进入RES . data){ if(RES . data[I])。标题。indexof(key)=0){//查找由…改编推(RES . data[I]))} } if(arr。长度==0){即。setdata({ news list :[]})else { that。setdata({ newslist : arr//在页面显示找到的数据}) } } }) }//搜素时触发，调用search:函数（键),传入输入的e。细节。价值值wxSearchInput:函数{这个。搜索(例如细节。值)；}index.wxml(首页)完整代码

view class=' search-view ' input class=' input ' confirm-type=' search ' maxlength=' 30 ' bind input=' wxSearchInput ' value=' { { key } } 绑定确认=' wxSearchFn '绑定焦点=' wxSerchFocus '绑定模糊=' wxSearchBlur '占位符='请输入搜索内容/input button class=' search ' bind tap=' wxSearchFn ' hover-class=' button-hover '搜索/button/view view class=' box two-tab-nav { { HomeIndex==0 ' '在" :"} } "绑定tap="框二"数据索引="0"上首页/view view class=' box two-tab-nav { { HomeIndex==1 '？ 在" :"} } "绑定tap="框二"数据索引="1"上资源分享/view view class=' box two-tab-nav { { HomeIndex==2 '？在" :"} } "绑定tap="框二"数据索引="2"上微信小程序/view view class=' box two-tab-nav { { HomeIndex==3 '？在" :"} } "绑定tap="框二"数据索引="3"上网赚小项目/view view class=' box two-tab-nav { { HomeIndex==4 '？在" :"} } "绑定tap="框二"数据索引="4"上共享经济/viewview class='wrap '模板名称=“列表”导航器url='././页数/细节/细节？id={ { id } } ' hover-class=' navigator-hover ' view class=' imgs ' image src=' http : { { img } } ' background-size=' cover ' mode=' scaleToFill '/image/view class=' infos ' view class=' title ' { title } }/view view view view class=' date ' { cTime } }/view/view/navigator/template/view wx : if=' { { HomeIndex==0 } } ' block wx 3360.item}}'//block/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=“http : ”{ { item。img } } ' background-size=' cover ' mode=' scaleToFill '/image/view class=' infos ' view class=' title ' { item。title } }/view view class=' date ' { item。ctime } }/view/view/navigator/block/view wx : if=' { { HomeIndex==2././页数/微信尾/微信尾？id={ { item。id } }“hover-class=”navigator-hover”view class=“imgs”image src=“http : ”{ { item。img } } ' background-size=' cover ' mode=' scaleToFill '/image/view class=' infos ' view class=' title ' { item。title } }/view view class=' date ' { item。ctime } }/view/view/navigator/block/view wx : if=' { { HomeIndex==3././pages/netbeautil/netbeautil？id={ { item。id } }“hover-class=”navigator-hover”view class=“imgs”image src=“http : ”{ { item。img } } ' background-size=' cover ' mode=' scaleToFill '/image/view class=' infos ' view class=' title ' { item。title } }/view view class=' date ' { item。ctime } }/view/view/navigator/block/view wx : if=' { { HomeIndex==4././页数/经济尾部/经济尾部？id={ { item。id } }“hover-class=”navigator-hover”view class=“imgs”image src=“http : ”{ { item。img } } ' background-size=' cover ' mode=' scaleToFill '/image/view class=' infos ' view class=' title ' { item。title } }/view view view class=' date ' { item。ctime } }/view/view/navigator/block/view索引。wxss(对应的样式文件)。包装{身高： 100%；显示： flex flex-方向：柱；padding: 20rpx }导航器{overflow:隐藏}。列表{边距-底部： 20 rpx高度： 200rpx相对位置：}.imgs{ float:左侧；}.毕业生图像{显示：块；宽度： 210 rpx高度： 180rpx}。box two-tab-nav { display : inline-block；宽度： 20%;高度： 90 rpx线高： 90 rpx边框-底部： 1rpx实心# ededed盒子尺寸：边框盒子；文本对齐：中心；颜色：黑色；font-size: 30rpx} .在{ color: # 405F80边框-bottom: 5rpx实心# 405F80}。信息{左侧浮动： }宽度： 480 rpxheight : 200 rpxpadding : 20 rpx 0 0 20 rpx }。日期{ font-size 3:13 pxcolor: # aaa绝对位置：}.title { font-size : 15px}.向左搜索{ float:宽度： 130 rpx高度： 70rpx左边距-: 0;背景色：蓝紫色；font-size : 28 rpxcolor: # fffborder:无；}.输入{左侧浮动：宽度： 500 rpx高： 70 rpx font-size : 35 rpx；背景-颜色：白色；}.搜索-查看{位置：相对；飞越：隐藏；height : 70 rpx padd : 20 rpx 20 rpx 25 rpx 60 rpx；背景色-: # 6699 ff；}.按钮-悬停{背景-颜色：红色；}.射流研究…文件（逻辑层)

page({ data : { news list :[]，HomeIndex: 0 }，OnLoad : function(){ var=this；wx。请求({ URL : ' http://localhost :81/Wei CMS/index。PHP？s=/addon/School/School/getList '，data: {}，header : { ' content-type ' : ' application/JSON ' }，success : function(RES){ console。日志(资源数据)wx。setstorage({ key : ' news list '，data: res.data，})即。setdata({新闻列表： RES . data })})wx。请求({ URL 333333330 } .s=/addon/Share/Share/getList '，data: {}，header : { ' content-type ' : ' application/JSON ' }，success : function(RES){ wx。setstorage({ key : ' shares list '，data: res.data，})该。setdata({ share list : RES . data })})wx。请求({ URL 3: '

以上所述是小编给大家介绍的微信小程序首页的分类功能和搜索功能的实现思路及代码详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！