微信小程序自定义可滑动的tab切换_javascript技巧_

   {{item}}                                      产品编号           当前库存           按时间倒序                                          {{item.prodCode}}             {{item.proName}}             {{item.time}}                             查看全部               

// 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; }