微信小程序自定义可滑动的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; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
赞 (0)