微信小程序购物商城项目四分类页面

　　四、分类页面4。0创建cate分支
　　运行如下的命令，基于master分支在本地创建cate子分支，用来开发分类页面相关的功能：gitcheckoutbcate4。1渲染分类页面的基本结构1。页面结构templateviewviewclassscrollviewcontainer！左侧的滚动视图区域scrollviewclassleftscrollviewscrollytrue：style｛height：whpx｝！以下内容只用来模拟滚动，非项目真正内容viewclassleftscrollviewitemactivexxxviewviewclassleftscrollviewitemxxxviewviewclassleftscrollviewitemxxxviewviewclassleftscrollviewitemxxxviewviewclassleftscrollviewitemxxxviewviewclassleftscrollviewitemxxxviewviewclassleftscrollviewitemxxxviewviewclassleftscrollviewitemxxxviewviewclassleftscrollviewitemxxxviewviewclassleftscrollviewitemxxxviewviewclassleftscrollviewitemxxxviewviewclassleftscrollviewitemxxxviewviewclassleftscrollviewitemxxxviewscrollview！右侧滚动视图区域scrollviewclassrightscrollviewscrollytrue：style｛height：whpx｝viewclassleftscrollviewitemxxxviewviewclassleftscrollviewitemxxxviewviewclassleftscrollviewitemxxxviewviewclassleftscrollviewitemxxxviewviewclassleftscrollviewitemxxxviewviewclassleftscrollviewitemxxxviewviewclassleftscrollviewitemxxxviewscrollviewviewviewtemplate2。动态计算窗口剩余高度：3。美化页面结构stylelangscss。scrollviewcontainer｛display：flex；。leftscrollview｛width：120rpx；。leftscrollviewitem｛lineheight：60px；backgroundcolor：f7f7f7；textalign：center；fontsize：12px；激活项的样式。active｛backgroundcolor：ffffff；position：relative；渲染激活项左侧的红色指示边线：：before｛content：；display：block；width：3px；height：30px；backgroundcolor：c00000；position：absolute；left：0；top：50；transform：translateY（50）；｝｝｝｝｝style
　　测试结果如下：
　　4。2获取分类数据
　　获取到的数据示例如下：｛message：〔｛catid：1，catname：大家电，catpid：0，catlevel：0，catdeleted：false，caticon：，children：〔｛catid：3，catname：电视，catpid：1，catlevel：1，catdeleted：false，caticon：，children：〔｛catid：5，catname：曲面电视，catpid：3，catlevel：2，catdeleted：false，caticon：https：apihmugoweb。itheima。netfull2fb113b32f7a2b161f5ee4096c319afedc3fd5a1。jpg｝〕｝〕｝〕，meta：｛msg：获取成功，status：200｝｝
　　返回参数说明
　　参数名
　　类型
　　catid
　　int
　　分类id
　　catname
　　string
　　分类名称
　　children
　　array
　　子节点
　　caticon
　　string
　　图标4。3动态渲染左侧的一级分类列表1。循环渲染列表结构templateviewviewclassscrollviewcontainer！左侧的滚动视图区域scrollviewclassleftscrollviewscrollytrue：style｛height：whpx｝blockvfor（item，i）incateList：keyiview：class〔leftscrollviewitem，iactive？active：〕｛｛item。catname｝｝viewblockscrollview！右侧滚动视图区域scrollviewclassrightscrollviewscrollytrue：style｛height：whpx｝scrollviewview2。在data中定义默认选中项的索引3。循环渲染结构时，为选中项动态添加。active类名templateviewviewclassscrollviewcontainer！左侧的滚动视图区域scrollviewclassleftscrollviewscrollytrue：style｛height：whpx｝blockvfor（item，i）incateList：keyiview：class〔leftscrollviewitem，iactive？active：〕｛｛item。catname｝｝viewblockscrollview！右侧滚动视图区域scrollviewclassrightscrollviewscrollytrue：style｛height：whpx｝scrollviewviewviewtemplate4。为一级分类的Item项绑定点击事件处理函数activeChangedtemplateviewviewclassscrollviewcontainer！左侧的滚动视图区域scrollviewclassleftscrollviewscrollytrue：style｛height：whpx｝blockvfor（item，i）incateList：keyiview：class〔leftscrollviewitem，iactive？active：〕clickactiveChanged（i）｛｛item。catname｝｝viewblockscrollview！右侧滚动视图区域scrollviewclassrightscrollviewscrollytrue：style｛height：whpx｝scrollviewviewviewtemplate5。定义activeChanged事件处理函数，动态修改选中项的索引4。4动态渲染右侧的二级分类列表1。在data中定义二级分类列表的数据节点2。修改getCateList方法，在请求数据之后，为二级分类列表数据赋值3。修改activeChanged方法，在一级分类项改变之后，为二级分类列表数据重新赋值4。循环渲染右侧二级分类列表的UI结构templateviewviewclassscrollviewcontainer。。。！右侧滚动视图区域scrollviewclassrightscrollviewscrollytrue：style｛height：whpx｝viewclasscatelv2vfor（item2，i2）incateLevel2：keyi2viewclasscatelv2title｛｛item2。catname｝｝viewviewscrollviewviewviewtemplate5。美化二级分类的标题样式stylelangscss。catelv2title｛fontsize：12px；fontweight：bold；textalign：center；padding：15px0；｝style6。测试结果
　　4。5动态渲染右侧的三级分类列表1。在二级分类的组件中，循环渲染三级分类的列表结构templateviewviewclassscrollviewcontainer。。。！右侧滚动视图区域scrollviewclassrightscrollviewscrollytrue：style｛height：whpx｝viewclasscatelv2vfor（item2，i2）incateLevel2：keyi2！二级分类的标题viewclasscatelv2title｛｛item2。catname｝｝view！动态渲染三级分类的列表数据viewclasscatelv3list！三级分类Item项viewclasscatelv3itemvfor（item3，i3）initem2。children：keyi3！图片image：srcitem3。caticonimage！文字text｛｛item3。catname｝｝textviewviewviewscrollviewviewviewtemplate2。美化三级分类的样式stylelangscss。catelv3list｛display：flex；flexwrap：wrap；。catelv3item｛width：33。33；marginbottom：10px；display：flex；flexdirection：column；alignitems：center；image｛width：60px；height：60px；｝text｛fontsize：12px；｝｝｝style
　　测试效果如下：
　　图片url无法访问，出现问题，暂未解决4。6切换一级分类后重置滚动条的位置1。在data中定义滚动条距离顶部的距离2。动态为右侧的组件绑定scrolltop属性的值scrollviewclassrightscrollviewscrollytrue：style｛height：whpx｝：scrolltopscrollTopscrollview3。切换一级分类时，动态设置scrollTop的值左侧选中项改变事件处理activeChanged（i）｛this。activeithis。cateLevel2this。cateList〔i〕。children让scrollTop在0和1之间切换this。scrollTopthis。scrollTop？0：1｝4。7点击三级分类跳转到商品列表页面为三级分类的Item项绑定点击事件处理函数定义事件处理函数gotoGoodsList（item3）｛
　　uni。navigateTo（｛
　　url：subpkggoodslistgoodslist？ciditem3。catid
　　｝）
　　｝4。8分支的合并与提交gitadd。gitcommitm完成了分类页面的开发gitpushuorigincategitcheckoutmastergitmergecategitpushuorigincategitbranchdcate