本文实例为大家分享了微信小程序自定义tab切换(可滑动),供大家参考,具体内容如下
自定义tab切换(可滑动)
{{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; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。