ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

微信小程序基础-侧边菜单的实现

2018-09-20 09:31:11  阅读:107  来源: 互联网

标签:


效果
在这里插入图片描述
思路:
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">
            <block....>
                  <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;
    }

标签:
来源: https://blog.csdn.net/newland9999/article/details/82776144

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有