1.wxml页面
<!--index.wxml--> <swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:362rpx" bindchange="bindChange"> <!-- 我是哈哈 --> <swiper-item> <view class="page__bd"> <view class="weui-grids"> <block wx:for-items="{{grids}}" wx:key="{{index}}"> <view class="weui-grid" hover-class="weui-grid_active" data-index="{{index}}" data-id="{{0}}" bindtap="click"> <image class="weui-grid__icon" src="../../images/icon_tabbar.png" /> <view class="weui-grid__label">{{'哈哈-' + index}}</view> </view> </block> </view> </view> </swiper-item> <!-- 我是呵呵 --> <swiper-item> <view class="page__bd"> <view class="weui-grids"> <block wx:for-items="{{grids}}" wx:key="{{index}}"> <view class="weui-grid" hover-class="weui-grid_active" data-index="{{index}}" data-id="{{1}}" bindtap="click"> <image class="weui-grid__icon" src="../../images/icon_tabbar.png" /> <view class="weui-grid__label">{{'呵呵-' + index}}</view> </view> </block> </view> </view> </swiper-item> </swiper> <view class="indicator"> <block wx:for="{{swiperList}}"> <view class="swiper_item" style="background-color:{{index == currentTab?'#04b00f':'#aaaaaa'}};"></view> </block> </view>
2.js页面
//获取应用实例 var app = getApp() Page({ data: { currentTab: 0, grids: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], swiperList:[0, 1, 2, 3, 4] }, onl oad: function () { }, click: function (e) { console.log(e.currentTarget.dataset.id) console.log(e.currentTarget.dataset.index) wx.showToast({ title: '第' + e.currentTarget.dataset.id + '栏' + '第' + e.currentTarget.dataset.index + '个', icon: 'success', duration: 1500 }) }, /** * 滑动切换tab */ bindChange: function (e) { console.log(e.detail.current) this.setData({ currentTab: e.detail.current }); }, })
3.样式wxss页面
/**index.wxss**/ .swiper-box { display: block; height: 100%; width: 100%; overflow: hidden; } .swiper-box view { text-align: center; } .weui-grids { border-top: 1rpx solid #d9d9d9; border-left: 1rpx solid #d9d9d9; overflow: hidden; } .weui-grid { position: relative; float: left; padding: 20px 10px; width: 20%; box-sizing: border-box; /*border-right: 1rpx solid #D9D9D9; border-bottom: 1rpx solid #D9D9D9;*/ } .weui-grid__icon { display: block; width: 28px; height: 28px; margin: 0 auto; } .weui-grid__label { margin-top: 5px; display: block; text-align: center; color: #000; font-size: 14px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .indicator { width: 100%; height: 60rpx; display:flex; flex-direction:row; justify-content:center; align-items:center; background: #eee; } .swiper_item { margin: 15rpx 10rpx; position: relative; float: left; width: 30rpx; height: 30rpx; border-radius: 50%; background-color: #aaa; }