資訊專欄INFORMATION COLUMN
在開發(fā)項目中，要實現(xiàn)微信小程序自定義可滑動的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: {
},
/**
* 組件的初始數(shù)據(jù)
*/
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;
}內容已講述完畢，請大家多多后續(xù)精彩內容。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://systransis.cn/yun/127825.html
摘要：利用這篇教程存儲一些常用的微信小程序開發(fā)技巧，方便查找。但是第一，微信小程序是國內的，有中文文檔，雖然它的文檔說明有點坑，但好歹有文檔，閱讀理解對小伙伴們來說不是問題。 Create by jsliang on 2018-9-17 17:58:56 Recently revised in 2018-11-19 08:19:13 ?Hello 小伙伴們，如果覺得本文還不錯，記得給個...
摘要：利用這篇教程存儲一些常用的微信小程序開發(fā)技巧，方便查找。但是第一，微信小程序是國內的，有中文文檔，雖然它的文檔說明有點坑，但好歹有文檔，閱讀理解對小伙伴們來說不是問題。 Create by jsliang on 2018-9-17 17:58:56 Recently revised in 2018-11-19 08:19:13 ?Hello 小伙伴們，如果覺得本文還不錯，記得給個...
摘要：利用這篇教程存儲一些常用的微信小程序開發(fā)技巧，方便查找。但是第一，微信小程序是國內的，有中文文檔，雖然它的文檔說明有點坑，但好歹有文檔，閱讀理解對小伙伴們來說不是問題。 Create by jsliang on 2018-9-17 17:58:56 Recently revised in 2018-11-19 08:19:13 ?Hello 小伙伴們，如果覺得本文還不錯，記得給個...
閱讀 566·2023-03-27 18:33
閱讀 755·2023-03-26 17:27
閱讀 656·2023-03-26 17:14
閱讀 608·2023-03-17 21:13
閱讀 541·2023-03-17 08:28
閱讀 1829·2023-02-27 22:32
閱讀 1324·2023-02-27 22:27
閱讀 2207·2023-01-20 08:28
