微信小程序自定義可滑動的tab切換
本文實例為大傢分享瞭微信小程序自定義tab切換(可滑動),供大傢參考,具體內容如下
自定義tab切換(可滑動)
<!--components/warn/warn.wxml--> <view class="menu"> <navigator wx:for="{{shouye}}" wx:key="index" bindtap="change" class="{{page==index?'font-white':'font-black'}}" data-pageid="{{index}}">{{item}}</navigator> <!-- <view class="order-desc">按排名升序</view> --> </view> <swiper current='{{page}}' bindchange="changepage"> <swiper-item wx:for="{{shouye}}" wx:key="index"> <view class="view1"> <view class="table"> <view class="tr"> <view class="th">產品編號</view> <view class="th">當前庫存</view> <view class="th">按時間倒序</view> </view> <block wx:for="{{saleData}}" wx:key="index"> <view class="tr bg-f3f4f4"> <view class="td">{{item.prodCode}}</view> <view class="td">{{item.proName}}</view> <view class="td">{{item.time}}</view> </view> </block> <view class="all-tabledata">查看全部</view> </view> </view> </swiper-item> </swiper>
// components/warn/warn.js Component({ /** * 組件的屬性列表 */ properties: { }, /** * 組件的初始數據 */ data: { shouye: ['未處理', '已處理'], page: 0, saleData:[ { prodCode:38749237093280, proName:'1000', time:'2021-12-12 14:00' }, { prodCode:38749237093280, proName:'1000', time:'2021-12-12 14:00' }, { prodCode:38749237093280, proName:'1000', time:'2021-12-12 14:00' }, { prodCode:38749237093280, proName:'1000', time:'2021-12-12 14:00' }, { prodCode:38749237093280, proName:'1000', time:'2021-12-12 14:00' }, { prodCode:38749237093280, proName:'1000', time:'2021-12-12 14:00' }, { prodCode:38749237093280, proName:'1000', time:'2021-12-12 14:00' }, { prodCode:38749237093280, proName:'1000', time:'2021-12-12 14:00' }, { prodCode:38749237093280, proName:'1000', time:'2021-12-12 14:00' }, { prodCode:38749237093280, proName:'1000', time:'2021-12-12 14:00' }, { prodCode:38749237093280, proName:'1000', time:'2021-12-12 14:00' }, { prodCode:38749237093280, proName:'1000', time:'2021-12-12 14:00' }, { prodCode:38749237093280, proName:'1000', time:'2021-12-12 14:00' }, { prodCode:38749237093280, proName:'1000', time:'2021-12-12 14:00' }, { prodCode:38749237093280, proName:'1000', time:'2021-12-12 14:00' } ] }, /** * 組件的方法列表 */ methods: { change: function (event) { var a = event.currentTarget.dataset.pageid this.setData({ page: a }) }, changepage: function (event) { console.log(event) var a = event.detail.current this.setData({ page: a }) }, } })
/* components/warn/warn.wxss */ scroll-view{ width: 100%; height: 100%; display: flex; } .menu{ /* background-color: red; display: flex; height: 60rpx; font-size: 40rpx; line-height: 70rpx; flex-direction: row; justify-content: space-around; */ width: 100%; height: 10%; background: white; display: flex; align-items: center; justify-content: space-around; } .font-white{ display: flex; flex-direction: column; align-items: center; color: #FFFFFF; background: #197FF0; font-size: 16px; font-family: PingFang SC; font-weight: 400; width: 200rpx; height: 60rpx; line-height: 60rpx; opacity: 1; border-radius: 34rpx; } .font-black{ display: flex; flex-direction: column; align-items: center; font-size: 16px; font-family: PingFang SC; font-weight: 400; color: #041320; width: 200rpx; height: 60rpx; line-height: 60rpx; background: #F6F6F6; opacity: 1; border-radius: 34rpx; } .view1{ height: 100%; overflow-y: auto; } swiper { /* width: 100%; */ height: 90%; overflow-y: auto; /* margin: 0 auto; */ } /* 表格 */ .tr{ width: 100%; display: flex; /* justify-content: space-around; */ } .bg-f3f4f4{ margin-bottom: 20rpx; background:rgba(28, 41, 53,0.05) } .tr>.th:nth-child(1),.tr>.td:nth-child(1){ width: 40%; text-align: center; } .tr>.th:nth-child(2),.tr>.td:nth-child(2){ width: 20%; text-align: center; } .tr>.th:nth-child(3),.tr>.td:nth-child(3){ width: 40%; text-align: center; } .th,.td{ font-size: 28rpx; font-family: PingFang SC; font-weight: 400; line-height:80rpx; color: #041320; } .all-tabledata{ font-size: 24rpx; font-family: PingFang SC; font-weight: 400; height: 40rpx; line-height:30rpx; color: #187EEF; text-align: center; margin: 40rpx 0; }
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。