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

一、效果分析

   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"></