⼩程序基础-侧边菜单的实现
html的flex布局效果
思路：
1、整个页⾯分成左右两个view，横向布局；左侧view⽤⼦菜单view⼀个个填充，纵向布局。
2、⼦菜单内容存⼊数组，点击⼦菜单view，⽤data-index="{{index}}"回传数组索引index，把index赋给程序数据selectMenuID。
3、在wxml判断selectMenuID==index时，改变点击⼦菜单的样式，显⽰不同的右侧页⾯
4、右侧view根据selectMenuID⽤wx:if显⽰相应页⾯
具体代码如下：
js:
data:{
menuItems: ['宝宝奶粉','纸尿裤','母婴专区','营养保健','进⼝美⾷','护肤美体','居家⽇⽤','婴⼉辅⾷','特惠促销'],
selectMenuID:0
}
wxml:
<view class="container">
<!--左侧栏-->
<view class="leftview">
<!--⽤数组填充左侧菜单页⾯-->
<block wx:for="{{menuItems}}">
<!--index是默认的数组下标，点击菜单，把index传给selectMenuID，三元表达式判断selectMenuID是否是当前index，⼦菜单⽤不同样式-->      <view class=" {{selectMenuID == index ? 'activemenu' : 'normalmenu'}}" bindtap="switchToRight"  data-index="{{index}}">{{item}}
</view>
</block>
</view>
<!--右侧栏-->
<view class="rightview">
<!--判断selectMenuID值显⽰不同页⾯-->
<view wx:if={{selectMenuID==1}}>
.....
</view>
<view wx:if={{selectMenuID==2}}>
.....
</view>
</view>
样式框架
<view class="container">
<view class="left">
&>
<view class="{{selectMenuID==index?submenu_active:submenu">
</view>
</block>
</view>
<view class="right">
</view>
</view>
WXSS：采⽤flex布局
.container{
display:flex;
flex-direction:row;
height:1200rpx;/*不设⾼度好像不⾏，如果有解决办法请告知*/
}
.left{
display:flex;
flex-direction:column;
}
/**没选中时⼦菜单样式**/
.
submenu{
width:...
height:...
background-color:#F0F0F0;
}
/**选中时⼦菜单样式**/
.submenu_active{
width:...
height:...
background-color:#FFFFFF;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。