微信小程序侧栏分类一：数据在wxml中定义

唐小枝

于 2018-05-17 11:36:42 发布

阅读量7k

点赞数 3

文章标签：微信小程序侧栏分类

本文链接：https://blog.csdn.net/weixin_41583535/article/details/80348277

版权

一、效果分析

1、效果图

2、布局分析

分成三个盒子：

主盒子, 左盒子, 右盒子

如图：

二、代码实现

1、wxml

 
      <!--主盒子--> 
     
      < 
      view 
      class= 
      "container"> 
     
      <!-- 左侧栏 --> 
     
      < 
      view 
      class= 
      'nav_left'> 
     
      < 
      view 
      class= 
      "nav_left_items {
       {curNav == 1 ? 'active' : ''}}" 
     
      bindtap= 
      "switchRightTab" 
      data-id= 
      "1"> 
     
       水果 
     
      </ 
      view 
      > 
     
      < 
      view 
      class= 
      "nav_left_items {
       {curNav == 2 ? 'active' : ''}}" 
     
      bindtap= 
      "switchRightTab" 
      data-id= 
      "2"> 
     
       干果 
     
      </ 
      view 
      > 
     
      < 
      view 
      class= 
      "nav_left_items {
       {curNav == 3 ? 'active' : ''}}" 
     
      bindtap= 
      "switchRightTab" 
      data-id= 
      "3"> 
     
       蔬菜 
     
      </ 
      view 
      > 
     
      < 
      view 
      class= 
      "nav_left_items {
       {curNav == 4 ? 'active' : ''}}" 
     
      bindtap= 
      "switchRightTab" 
      data-id= 
      "4"> 
     
       海鲜 
     
      </ 
      view 
      > 
     
      </ 
      view 
      > 
     
      <!-- 右侧栏 --> 
     
      < 
      view 
      class= 
      "nav_right"> 
     
      < 
      view 
      wx:if= 
      "{
       {curNav==1}}"> 
     
      < 
      view 
      class= 
      "nav_right_items"> 
     
      < 
      image 
      src= 
      "../images/mihoutao.png"></