tab切換效果

wxml

<view class="content"><!--頭部tab切換部分start--><view class="menu"><view class="{{currentTab==index?'select':'default'}}" wx:for="{{switchtab}}" wx:key='' data-current="{{index}}" catchtap="switchNav">{{item.name}}</view></view><view class="explain-box"><text class="explain">使用說明</text><text class="iconfont icon-wenhao"></text></view><!--頭部tab切換部分end--><!--切換內容部分start--><swiper current='{{currentTab}}' bindchange="tabChange" class='mySwiper'><block wx:for="{{coupons}}" wx:key=""><swiper-item><block wx:for="{{item}}" wx:key="" wx:for-item="spItem"><view class="item"><view class="left"><view class="left-top"><text class="rmb">￥</text><text class="price">{{spItem.price}}</text></view><view class="left-bottom"><text class="label">{{spItem.condition}}</text></view></view><view class="right"><text class="item-1">{{spItem.goods}}</text><text class="item-2">優惠券描述</text><text class="item-3">{{spItem.way}}</text><text class="item-4">{{spItem.date}}</text></view></view></block></swiper-item></block></swiper><!--切換內容部分end--> </view>

js

Page({data: {switchtab: [{name: '未使用',_type: 'notUsed'}, {name: '已使用',_type: 'alreadyUsed'},{name: '已過期',_type: 'expired'}],currentTab: 0,coupons: []},onLoad: function (options) {this.setData({coupons: this.loadCoupons()});},//tab切換函數，讓swiper當前滑塊的current的index與tab頭部index一一對應switchNav: function (e) {var index = e.target.dataset.current;if (this.data.currentTab == index) {return false;} else {this.setData({currentTab: index});}},//滑動swiper切換，讓swiper當前滑塊的current的index與tab頭部index一一對應tabChange(e) {this.setData({currentTab: e.detail.current})},//自定義數據函數loadCoupons: function () {let switchtab = this.data.switchtab,coupons = [{id: "1",price: "200",condition: "無門檻",goods: "新用戶 20元優惠券；",way: "限無人機、數碼、潮玩",date: "2017.3.22-2017.12.22",_type: "notUsed"}, {id: "1",price: "200",condition: "無門檻",goods: "新用戶 20元優惠券；",way: "限無人機、數碼、潮玩",date: "2017.3.22-2017.12.22",_type: "notUsed",}, {id: "1",price: "200",condition: "無門檻",goods: "新用戶 20元優惠券",way: "限無人機、數碼、潮玩；",date: "2017.3.22-2017.12.22",_type: "notUsed",}, {id: "1",price: "200",condition: "無門檻",goods: "新用戶 20元優惠券",way: "限無人機、數碼、潮玩；",date: "2017.3.22-2017.12.22",_type: "notUsed"}, {id: "1",price: "200",condition: "無門檻",goods: "新用戶 20元優惠券",way: "限無人機、數碼、潮玩；",date: "2017.3.22-2017.12.22",_type: "notUsed"}, {id: "2",price: "200",condition: "無門檻",goods: "新用戶 20元優惠券",way: "限無人機、數碼、潮玩；",date: "2017.3.22-2017.12.22",_type: "alreadyUsed"}, {id: "2",price: "100",condition: "滿500可用",goods: "僅可購買網絡品類指定商品",way: "全平臺",date: "2017.3.22-2017.12.22",_type: "alreadyUsed",}, {id: "2",price: "100",condition: "滿500可用",goods: "僅可購買網絡品類指定商品",way: "全平臺",date: "2017.3.22-2017.12.22",_type: "alreadyUsed",}, {id: "3",price: "200",condition: "滿200可用",goods: "僅可購買網絡品類指定商品",way: "全平臺",date: "2017.3.22-2017.12.22",_type: "expired"}];//這里是根據tab頭部的數據來重建一個數組，使數組的內容與tab一一對應var result = new Array();for (var n = 0; n < switchtab.length; n++) {let minArr = []for (var i = 0; i < coupons.length; i++) {//根據類型來區分自定義的內容屬于哪個tab下面的if (coupons[i]._type == switchtab[n]._type) {minArr.push(coupons[i]);}}result.push(minArr)}return result;},onReady: function () {},onShow: function () {},onHide: function () {},onUnload: function () {},onPullDownRefresh: function () {},onReachBottom: function () {} })

css

.content {background-color: #fff; }.menu {width: 100%;display: flex;box-sizing: border-box;border-bottom: 1px solid #f2f2f2;z-index: 11; }.menu view {margin: 0rpx auto;height: 88rpx;line-height: 88rpx;font-size: 28rpx;color: #434343; }.menu .mr {border-right: 0rpx; }.select {position: relative; }.select:after {position: absolute;left: 7rpx;bottom: 0rpx;content: "";width: 70rpx;height: 8rpx;background-color: #3795ff;border-radius: 4px 4px 0 0; }.body {width: 100%;box-sizing: border-box; }.body .explain-box {display: flex;justify-content: flex-end;height: 80rpx;line-height: 80rpx;box-sizing: border-box;padding: 0rpx 30rpx;z-index: 12; }.explain-box text {font-size: 24rpx;color: #3795ff; }.explain-box .explain {margin-right: 8rpx; }.explain-box .icon-wenhao {vertical-align: middle;line-height: 82rpx; }.item {background-color: #3795ff;width: 690rpx;margin: 0 auto;margin-bottom: 20rpx;border-radius: 10rpx;display: flex;padding: 20rpx 0rpx;box-sizing: border-box; }.item .left {width: 180rpx;height: 140rpx;border-right: 1px solid #7fbbff; }.item .left .left-top {text-align: center;height: 94rpx;color: #fff; }.item .left .left-top .rmb {font-size: 34rpx; }.item .left .left-top .price {font-size: 60rpx; }.left-bottom {height: 32rpx;display: flex;justify-content: center; }.label {height: 32rpx;line-height: 32rpx;padding: 0rpx 18rpx;font-size: 24rpx;color: #3795ff;text-align: center;background-color: #fff;border-radius: 200rpx; }.item .right {flex: 1;display: flex;flex-direction: column;padding-left: 56rpx; }.item-1 {font-size: 32rpx;line-height: 32rpx;color: #fff; }.item-2 {font-size: 24rpx;line-height: 32rpx;color: #1b67bd; }.item-3, .item-4 {margin-top: 13rpx;font-size: 24rpx;line-height: 32rpx;color: #fff; }.item-4 {margin-top: 0rpx; }.mySwiper {position: fixed;width: 100%;height: 100%;top: 0;box-sizing: border-box;padding: 170rpx 0rpx 0rpx 0rpx;z-index: -1; }.mySwiper swiper-item {overflow-y: scroll; }

總結

以上是生活随笔為你收集整理的小程序如何写tab选项卡的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。