小程序常用组件及应用(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中放内容)