小程序 3

小程序常用组件及应用（wxml中使用）

1. 制作顶部一行多列的导航栏

  data: {
    cont: 0,
    list:['one', 'two', 'three'],
    data:['12312321312321312312','252525252525466262426426465', '99999999999999999999999'],
  },

  tab_btn: function (e) {
    this.setData({
      cont: e.target.dataset.index
    })
  },

 1 <view>
 2   <view class='line_tab'>
 3     <view wx:for="{{list}}" wx:key="list_key" class='tab_context'>
 4       <view class='{{cont == index ? "tab_on": " "}}' data-index="{{index}}" bindtap='tab_btn'>{{item}}</view>
 5     </view>  
 6   </view>
 7   <view>
 8     <view>{{data[cont]}}</view>
 9   </view>
10 </view>

.line_tab {
  background-color: black;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}
.tab_context {
  color: white;
  border-bottom: solid 1rpx black;
}
.tab_on{
  color: burlywood;
  border-bottom: solid 1rpx orange;
}

2. 轮播图制作：swiper

　　a. 滑块视图容器（此组件中间只能放swiper-item组件，swiper-item中放内容）