微信小程序开发笔记(五)--swiper实现tab选项卡
wxml:
<!--pages/index/index.wxml-->
<view class="swiper-tab">
<view class="{{tab===0 ? 'on' : ''}}" data-current="0" bindtap="tab_click">{{tablist1}}</view>
<view class="{{tab===1 ? 'on' : ''}}" data-current="1" bindtap="tab_click">{{tablist2}}</view>
<view class="{{tab===2 ? 'on' : ''}}" data-current="2" bindtap="tab_click">{{tablist3}}</view>
<view class="{{tab===3 ? 'on' : ''}}" data-current="3" bindtap="tab_click">{{tablist4}}</view>
</view>
<swiper circular="true" current="{{tab}}" class="swiper-box" duration="300" bindchange="tab_slide">
<swiper-item>
1
</swiper-item>
<swiper-item>
2
</swiper-item>
<swiper-item>
3
</swiper-item>
<swiper-item>
4
</swiper-item>
</swiper>
wxss:
/* pages/index/index.wxss */ .swiper-tab>view { display: inline-block; line-height: 80rpx; text-align: center; background-color: white; width: 25%; font-size: 30rpx; } .swiper-box { width: 100%; min-height: calc(100vh - 80rpx); font-size: 34rpx; background-color: #e6e6e6; } .swiper-box swiper-item { overflow-y: auto; } .on { color: blue; }
js:
// pages/index/index.js Page({ /** * 页面的初始数据 */ data: { tab: 0, tablist1: '全部', tablist2: '未审核', tablist3: '审核通过', tablist4: '审核失败', }, tab_slide: function (e) { //滑动切换tab var that = this; that.setData({ tab: e.detail.current }); console.log('滑动切换tab'); }, tab_click: function (e) { //点击tab切换 var that = this; if (that.data.tab == e.target.dataset.current) { return false; } else { that.setData({ tab: e.target.dataset.current }); console.log('点击tab切换'); } }, })
一辈子很短,努力的做好两件事就好;第一件事是热爱生活,好好的去爱身边的人;第二件事是努力学习,在工作中取得不一样的成绩,实现自己的价值,而不是仅仅为了赚钱。