样式（二级分类）html1.

结构说明：list列表分为left和right两块

viewclass"category"viewclass"search"inputtype"text"name"search"bindconfirm'shop_search_function'confirm-type'search'placeholder"请输入关键词"/imagesrc"{{imgurl}}l_shousuo.png"//view!--tab切换--viewclass"listflex"viewclass"left"viewclass"itemflex{{iindex?'active':''}}"data-index"{{index}}"wx:for"{{list}}"wx:key"{{index}}"bindtap"clickTab"{{item.name}}/view/viewviewclass"rightflex"viewclass"itemflex"wx:for'{{rightList.auctionMateriaList}}'wx:key"{{index}}"imagesrc"{{item.smallimage}}"/text{{item.name}}/text/view/view/view/viewless2.

样式说明：分类页面高度是100%，list列表给定高，然后overflow:auto；实现页面固定盒子滚动页面所有盒子高度采用百分比

.category{height:100%;border:1rpxsolidtransparent;.search{height:6%;margin:1.5%60rpx1.5%24rpx;position:relative;input{height:100%;background:rgba(245,245,245,1);border-radius:32rpx;padding-left:85rpx;}image{width:44rpx;height:44rpx;position:absolute;left:30rpx;top:10rpx;}}.list{border-top:1rpxsolid#F5F5F5;align-items:flex-start;height:91%;padding-top:10rpx;.left{width:168rpx;background:rgba(245,245,245,1);height:100%;overflow:auto;.item{width:100%;height:130rpx;justify-content:space-around;position:relative;.active{background-color:#fff;color:#FC5E62;:before{content:'';width:6rpx;height:40rpx;position:absolute;left:0;top:50%;margin-top:-20rpx;background-color:#FC5E62;}}}}.right{flex:1;margin-top:10rpx;height:100%;overflow:auto;font-size:24rpx;flex-wrap:wrap;justify-content:flex-start;align-items:flex-start;.item{flex-direction:column;width:33%;margin-bottom:60rpx;image{width:105rpx;height:110rpx;margin-bottom:35rpx;}}}}}js3.

逻辑说明：左右分开渲染左边渲染list，右边单独定义一个变量rightList，默认初始值为list的第一项，即第一大类点击左侧类别名称，获取索引，动态给右边列表赋值list[index],实现点击左边渲染右边的效果

//pages/category/category.jsconstappgetApp()constrequestrequire('../../utils/request.js')Page({/***页面的初始数据*/data:{imgurl:app.globalData.pmhImgurl,//全局img路径list:[],//分类列表rightList:{},//分类右边列表i:0,//分类点击的分类索引},//点击分类左侧，渲染右侧clickTab(e){letindexe.currentTarget.dataset.indexthis.setData({i:index,rightList:this.data.list[index]})},//键盘搜索功能shop_search_function:function(e){varvaluee.detail.value;console.log("-------"+value);},/***生命周期函数--监听页面加载*/onLoad:function(options){request('classify/selectClassify').then(data{console.log(data);this.setData({list:data,rightList:data[0]})})},/***生命周期函数--监听页面初次渲染完成*/onReady:function(){},/***生命周期函数--监听页面显示*/onShow:function(){},/***生命周期函数--监听页面隐藏*/onHide:function(){},/***生命周期函数--监听页面卸载*/onUnload:function(){},/***页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh:function(){},/***页面上拉触底事件的处理函数*/onReachBottom:function(){},/***用户点击右上角分享*/onShareAppMessage:function(){}})