微信小程序自定义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.jsComponent({/*** 组件的属性列表*/properties: {},/*** 组件的初始数据*/data: {shouye: ['未处理', '已处理'],page: 0,saleData:[{prodCode:38749237093280,proName:'1000',time:'-12-12 14:00'},{prodCode:38749237093280,proName:'1000',time:'-12-12 14:00'},{prodCode:38749237093280,proName:'1000',time:'-12-12 14:00'},{prodCode:38749237093280,proName:'1000',time:'-12-12 14:00'},{prodCode:38749237093280,proName:'1000',time:'-12-12 14:00'},{prodCode:38749237093280,proName:'1000',time:'-12-12 14:00'},{prodCode:38749237093280,proName:'1000',time:'-12-12 14:00'},{prodCode:38749237093280,proName:'1000',time:'-12-12 14:00'},{prodCode:38749237093280,proName:'1000',time:'-12-12 14:00'},{prodCode:38749237093280,proName:'1000',time:'-12-12 14:00'},{prodCode:38749237093280,proName:'1000',time:'-12-12 14:00'},{prodCode:38749237093280,proName:'1000',time:'-12-12 14:00'},{prodCode:38749237093280,proName:'1000',time:'-12-12 14:00'},{prodCode:38749237093280,proName:'1000',time:'-12-12 14:00'},{prodCode:38749237093280,proName:'1000',time:'-12-12 14:00'}]},/*** 组件的方法列表*/methods: {change: function (event) {var a = event.currentTarget.dataset.pageidthis.setData({page: a})},changepage: function (event) {console.log(event)var a = event.detail.currentthis.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;}
