微信小程序实现侧边分类栏

本文实例为大家分享了微信小程序实现侧边分类栏的具体代码，供大家参考，具体内容如下

效果图

布局分析

分成三个盒子：主盒子，左盒子，右盒子

wxml

！-主盒子- view class='container '！-左侧栏-view class=' nav _ left ' view class=' nav _ left _ items { { curNav==1 '？活动“: ' ' } }”绑定点击=“SwitChrightTab”数据-id='1 '水果/view view class=' nav _ left _ items { { CurNav==2 '？活动“: ' ' } }”绑定点击=“SwitChrightTab”数据-id='2 '干果/view view class=' nav _ left _ items { { CurNav==3 '？活动“: ' ' } }”绑定点击=“SwitChrightTab”数据-id='3 '蔬菜/view view class=' nav _ left _ items { { CurNav==4 '？活动“: ' ' } }”绑定点击=“SwitChrightTab”数据-id='4 '海鲜/view /view！-右侧栏-view class=' nav _ right ' view wx : if=' { { curNav==1 } } ' view class=' nav _ right _ items ' image src=' http :/images/mihoutao。png‘/图像文本猕猴桃/text/view view class=' nav _ right _ items ' image src=' http :/images/龙岩。png '/图像文本龙眼/text/view view class=' nav _ right _ items ' image src=' http :/images/juzi。png‘/图像文本橘子/text/view view class=' nav _ right _ items ' image src=' http :/images/霍龙国。png '/图像文本火龙果/text/view view class=' nav _ right _ items ' image src=' http :/图片/曹梅。png‘/图像文本草莓/text/view/view view wx : if=' { { curNav==2 } } ' view class=' nav _ right _ items ' image src=' http :/图片/小艺。png '/图像文本夏威夷果/text/view view class=' nav _ right _ items ' image src=' http :/图片/辛凯。png‘/图像文本开心果/text/view view class=' nav _ right _ items ' image src=' http :/images/bigen。png‘/图像文本碧根果/text/view view class=' nav _ right _ items ' image src=' http :/图片/莽国。png‘/图像文本芒果/text/view/view view wx : if=' { { curNav==3 } } ' view class=' nav _ right _ items ' image src=' http :/images/huaye。png‘/图像文本花椰菜/text/view view class=' nav _ right _ items ' image src=' http :/图片/蔡晟。png‘/图像文本生菜/text/view view class=' nav _ right _ items ' image src=' http :/images/fanqie。png‘/图像文本番茄/text/view/view/view/viewjs

//page/stock/stock _ main。JSpage({/*页面的初始数据*/data: { curNav:1 }，/*把点击到的某一项设为当前curNav */switchrighttab :函数(e){ let id=e . target。数据集。id；控制台。日志(id)；这个。setdata({ curnav : id })})wxss

/* 1.设置整个页面的背景色*/page { background : # f5f 5；/*当左边没有足够的项目时，避免被白色覆盖*/} /* 2。主框*/。容器{宽度： 100%；/*宽度占屏幕的100% */高度： 100%；/*高度占屏幕100% */background-color : # fff；/*背景色*/}/* 3。左框*//* 3.1。左栏主框的整体设置*/。nav _ left {位置：绝对值；/*使用绝对定位*/top :0 px；/*距离上边距：0px */left :0 px；/*向左的距离：0px */宽度：25%；/*每个项目占用的宽度*/background : # F5 F5 F5；/*主框背景色为灰色*/text-align:居中；/*文本显示在中间*/}/* 3.2。左栏中的每个项目*/。nav _左侧。nav _ left _ items { height : 40px；/*每个项目高40px填充： 6px0/*上下内边距为6px[增加高度]，左右内边距为0px */border-bottom : 1 px solid # dede；/*设置底线*/font-size : 14px；/*设置文本大小：14px */} /* 3.3。当左栏列表中的项目被选中时，*/。nav _ left . nav _ left _ items . active { background : # fff；/*背景颜色变为白色*/color : # 3385 ff；/* font programming blue */border-left : 3px solid # 3385 ff；/*设置边框的宽度和颜色*/}/* 4。右框*//* 4.1。右栏主框的整体设置*/。Nav _ Right {位置：绝对；/*使用绝对定位*/top : 0；/*距离上边距：0px */left : 80px；/*向左的距离：80px */宽度：75%；/*右侧主盒占据的宽度*/高度： 600 px；/*右主框占据的高度*/padd : 10px；/*所有4个内边距都是10px */框大小：边框框；/*为元素指定的任何内部边距和边框都将在设置的宽度和高度范围内绘制*/background : # fff；/*右主框背景色*/}/* 4.2。右栏中的每一项*/。nav _右。nav _ right _ items { float : left；/*向左浮动*/横向： 33.33%；/*每一项的宽度为33.33% */height : 120 px；/*每个项目的设置高度为120 px */text-align : center；/*将图片下方的提示文字设置为居中显示*/} /* 4.3。在右栏中设置每个项目的图片样式*/。nav _右。nav _ right _ item image { width : 60px；/*设置图片宽度*/高度： 60px；/*设置图片高度*/边距-top : 15px；/*图片距离顶边15px边框-半径： 40%；/*为图片添加圆角边框*/}单击《Vue.js前端组件学习教程》了解更多教程。欢迎学习和阅读。

关于vue.js组件的教程，请点击专题vue.js组件学习教程学习。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。