介绍 & lt; !——主盒子——比;
& lt; view 类=癱ontainer"祝辞
,& lt; !——,左侧栏,——比;
,& lt; view 类=& # 39;nav_left& # 39;比;
,& lt; view 类=皀av_left_items {{curNav ==, 1, ?, & # 39;活跃# 39;,:,& # 39;& # 39;}}“,
,bindtap=皊witchRightTab"数据id=?“比;
,水果
,& lt;/view>
,& lt; view 类=皀av_left_items {{curNav ==, 2, ?, & # 39;活跃# 39;,:,& # 39;& # 39;}}“,
,bindtap=皊witchRightTab"数据id=?“比;
,干果
,& lt;/view>
,& lt; view 类=皀av_left_items {{curNav ==, 3, ?, & # 39;活跃# 39;,:,& # 39;& # 39;}}“,
,bindtap=皊witchRightTab"数据id=?“在
,蔬菜
,& lt;/view>
,& lt; view 类=皀av_left_items {{==curNav 4, ?, & # 39;活跃# 39;,:,& # 39;& # 39;}}“,
,bindtap=皊witchRightTab"数据id=?“比;
,海鲜
,& lt;/view>
,& lt;/view>
,& lt; !——,右侧栏,——比;
,& lt; view 类=皀av_right"比;
,& lt; view wx:如果=皗{curNav==1}}“比;
,& lt; view 类=皀av_right_items"比;
https://www.yisu.com/zixun/, & lt; image src=" . ./图片/mihoutao.png ">
<文本>猕猴桃
<视图类=" nav_right_items ">
<图像src=" . ./图片/longyan.png ">
<文本>龙眼
<视图类=" nav_right_items ">
<图像src=" . ./图片/juzi.png ">
<文本>橘子
<视图类=" nav_right_items ">
<图像src=" . ./图片/huolongguo.png ">
<文本>火龙果
<视图类=" nav_right_items ">
<图像src=" . ./图片/caomei.png ">
<文本>草莓
<查看天气:如果=" {{curNav==2}} ">
<视图类=" nav_right_items ">
<图像src=" . ./图片/xiaweiyi.png ">
<文本>夏威夷果
<视图类=" nav_right_items ">
<图像src=" . ./图片/kaixin.png ">
<文本>开心果
<视图类=" nav_right_items ">
<图像src=" . ./图片/bigen.png ">
<文本>碧根果
<视图类=" nav_right_items ">
<图像src=" . ./图片/mangguo.png ">
<文本>芒果
<查看天气:如果=" {{curNav==3}} ">
<视图类=" nav_right_items ">
<图像src=" . ./图片/huaye.png ">
<文本>花椰菜
<视图类=" nav_right_items ">
<图像src=" . ./图片/shengcai.png ">
<文本>生菜
<视图类=" nav_right_items ">
<图像src=" . ./图片/fanqie.png ">
<文本>番茄
//,/股票/stock_main.js页面
页面({
,/*页面的初始数据,*/,数据:{
curNav: 1
},
,/*把点击到的某一项,设为当前curNav */,switchRightTab:函数(e) {
,let id =, e.target.dataset.id;
,console.log (id);
,this.setData ({
,curNav: id
,})
,}
}) /*, 1只设置整个页面的背景颜色,*/{页,
,背景:# f5f5f5;,
,/*避免左侧项目不够时,被白色覆盖*/},/*,2。主盒子,*/,
{.container
,宽度:100%,,/*,宽度占屏幕的100%,*/,高度:100%,,/*,高度占屏幕的100%,*/,背景颜色:# fff;,/*,背景颜色,*/}/*,3。左盒子*/,
,/* 3.1只左侧栏主盒子总体设置,*/,
.nav_left {,
位置:绝对的,大敌;/*,使用绝对定位,*/,:0 px;/*,距离上边距:0 px */,左:0 px;/*,距离左边距:0 px */,宽度:25%,,/*,每个项目所占的宽度,*/,背景:# f5f5f5;,/*,主盒子设置背景色为灰色,*/,
,text-align:中心;,/*,文字居中显示,*/}/*,3.2只左侧栏的每个item */,
.nav_left_items {.nav_left
40岁,身高:px;,/*,每40个项目高像素*/,
,填充:6 px 0;,/*,上内边距和下内边距是,6 px(增加高度),右内边距和左内边距是,0 px */,边界底部:1 px solid # dedede;,/*,设置下边线,*/,
,字体大小:14 px,,/*,设置文字大小:14 px */,
},/*,3.3只左侧栏列表的项目被选中时*/,
.nav_left_items.active {.nav_left
,背景:# fff;,/*,背景色变成白色,*/,
,颜色:# 3385 ff,,/*,字体编程蓝色,*/,border-left: 3 px solid # 3385 ff,,/*,设置边框的宽度以及颜色,*/}/*,4。右盒子,*/,/*,4.1只右侧栏主盒子总体设置,*/,
.nav_right {,
,位置:绝对的,,/*,使用绝对定位,*/,
上图:大敌;0;,/*,距离上边距:0 px */,左:80 px,,/*,距离左边距:80 px */,宽度:75%,,/*,右侧主盒子所占宽度,*/,身高:600 px,,/*,右侧主盒子所占高度,*/null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
怎么在微信小程序中实现一个侧边分类栏?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。
本文实例为大家分享了微信小程序实现侧边分类栏的具体代码,供大家参考,具体内容如下
wxml -
js -
-wxss -
