在開發(fā)項(xiàng)目中,要實(shí)現(xiàn)微信小程序自定義可滑動(dòng)的tab切換。
下面就是自定義tab切換(可滑動(dòng))
</>復(fù)制代碼
<!--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">產(chǎn)品編號</view>
<view class="th">當(dāng)前庫存</view>
<view class="th">按時(shí)間倒序</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>
</>復(fù)制代碼
// 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
})
},
}
})
</>復(fù)制代碼
/* 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;
}
內(nèi)容已講述完畢,請大家多多后續(xù)精彩內(nèi)容。
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/127825.html
摘要:我們在函數(shù)中通過獲取設(shè)備的寬高來設(shè)置組件高度以及高度為導(dǎo)航欄的高度點(diǎn)擊導(dǎo)航欄切換內(nèi)容點(diǎn)擊切換滑動(dòng)內(nèi)容切換導(dǎo)航欄滑動(dòng)切換可滾動(dòng)區(qū)域滾動(dòng)最底刷新數(shù)據(jù)頁面上拉觸底事件的處理函數(shù)更新列表一個(gè)漂亮的選項(xiàng)卡就完成了完整案例 選項(xiàng)卡隨處可見,微信小程序中也不例外,下面來寫一個(gè)簡單的小程序選項(xiàng)卡 思路 之前寫過基于swiper的選項(xiàng)卡,在小程序中有swiper組件,毫無疑問這里要用到swiper組件...
摘要:利用這篇教程存儲一些常用的微信小程序開發(fā)技巧,方便查找。但是第一,微信小程序是國內(nèi)的,有中文文檔,雖然它的文檔說明有點(diǎn)坑,但好歹有文檔,閱讀理解對小伙伴們來說不是問題。 Create by jsliang on 2018-9-17 17:58:56 Recently revised in 2018-11-19 08:19:13 ?Hello 小伙伴們,如果覺得本文還不錯(cuò),記得給個(gè)...
摘要:利用這篇教程存儲一些常用的微信小程序開發(fā)技巧,方便查找。但是第一,微信小程序是國內(nèi)的,有中文文檔,雖然它的文檔說明有點(diǎn)坑,但好歹有文檔,閱讀理解對小伙伴們來說不是問題。 Create by jsliang on 2018-9-17 17:58:56 Recently revised in 2018-11-19 08:19:13 ?Hello 小伙伴們,如果覺得本文還不錯(cuò),記得給個(gè)...
摘要:利用這篇教程存儲一些常用的微信小程序開發(fā)技巧,方便查找。但是第一,微信小程序是國內(nèi)的,有中文文檔,雖然它的文檔說明有點(diǎn)坑,但好歹有文檔,閱讀理解對小伙伴們來說不是問題。 Create by jsliang on 2018-9-17 17:58:56 Recently revised in 2018-11-19 08:19:13 ?Hello 小伙伴們,如果覺得本文還不錯(cuò),記得給個(gè)...
閱讀 559·2023-03-27 18:33
閱讀 747·2023-03-26 17:27
閱讀 644·2023-03-26 17:14
閱讀 600·2023-03-17 21:13
閱讀 535·2023-03-17 08:28
閱讀 1817·2023-02-27 22:32
閱讀 1312·2023-02-27 22:27
閱讀 2197·2023-01-20 08:28