<template>
<view style="height: 100vh;background: #C7C7C7;">
<!-- 頂部tab導航部分
1.scroll-into-view="{{showView}}" 這裏需要藉助這個屬性來指定顯示tab
2.scroll-left="{{navScrollLeft}}" 藉助left來使scroll能讓遮蓋的tab動畫顯出
-->
<scroll-view class="pick_tab_box" scroll-x scroll-into-view="{{showView}}" scroll-with-animation scroll-left="{{navScrollLeft}}">
<view data-id="{{item.title}}" wx:for="{{swiperItems}}" class="{{currentTab == item.title ? 'tab_active' : ''}} tabItem" bindtap='switchTab'>{{item.title}}</view>
</scroll-view>
<view class="btn-more" @tap="openMore">更多</view>
<!-- 用於超過5個tab時展示更多-->
<view wx:if="{{showMore}}" style="margin-top: 47px;position: absolute;z-index: 333;right: 0;">
<button @tap='switchTab' data-id="{{item.title}}" wx:for="{{swiperItems}}">{{item.title}}</button>
</view>
<!-- 使用swiper組件來對應不同的tab
需要注意的是這裏必須給swiper加固定高度 並且是固定定位-tab高度 否則下面的子節點無法全撐開
-->
<swiper indicator-dots="{{false}}" current="{{currents}}" bindchange="swiperChange" style="height: {{windowHeight - 47}}px" class="swiperBox">
<block wx:for="{{swiperItems}}">
<swiper-item>
<!-- 這裏給每個tab展示頁都增加滾動組件，方便進行上來加載數據-->
<scroll-view
style="height: 100%;"
scroll-y
bindscroll="scroll"
bindscrolltolower = "onRBottom"
scroll-with-animation
lower-threshold="1"
scroll-top="{{scrollTop0}}px"
>
<view class="swiper-item" style="background: {{item.bg}};text-align: center;font-size: 25px;">
{{mockData}}
</view>
</scroll-view>
</swiper-item>
</block>
</swiper>
</view>
</template>
<script>
import wepy from 'wepy'
//模擬數據
let mockData = `測試數據第三方的撒范德薩發大幅度暗室逢燈發達發
測試數據第三方的撒范德薩發大幅度暗室逢燈發達發
測試數據第三方的撒范德薩發大幅度暗室逢燈發達發
測試數據第三方的撒范德薩發大幅度暗室逢燈發達發
測試數據第三方的撒范德薩發大幅度暗室逢燈發達發
測試數據第三方的撒范德薩發大幅度暗室逢燈發達發
測試數據第三方的撒范德薩發大幅度暗室逢燈發達發
測試數據第三方的撒范德薩發大幅度暗室逢燈發達發
測試數據第三方的撒范德薩發大幅度暗室逢燈發達發
測試數據第三方的撒范德薩發大幅度暗室逢燈發達發
測試數據第三方的撒范德薩發大幅度暗室逢燈發達發
測試數據第三方的撒范德薩發大幅度暗室逢燈發達發
測試數據第三方的撒范德薩發大幅度暗室逢燈發達發
測試數據第三方的撒范德薩發大幅度暗室逢燈發達發
測試數據第三方的撒范德薩發大幅度暗室逢燈發達發
測試數據第三方的撒范德薩發大幅度暗室逢燈發達發
測試數據第三方的撒范德薩發大幅度暗室逢燈發達發
測試數據第三方的撒范德薩發大幅度暗室逢燈發達發
測試數據第三方的撒范德薩發大幅度暗室逢燈發達發
測試數據第三方的撒范德薩發大幅度暗室逢燈發達發
測試數據第三方的撒范德薩發大幅度暗室逢燈發達發`
export default class categoryScroll extends wepy.page {
config = {
navigationBarTitleText: '測試'
}
components = {}
data = {
currentTab:'tab1',//標記當前tab
showView:'',
navScrollLeft:0,//滾動組件距離左側位置
showMore:false,//是否展示tab更多按鈕
currents:0,
windowHeight:0,//屏幕高度
scrollTop0:0,
mockData:'',
isLoading:false,//用於標記是否數據加載中，防止重複請求
pageData:{//每個tab對應頁的數據結構
tab1:{
data:{},
pageIndex:0,
total:0
},
tab2:{
data:{},
pageIndex:0,
total:0
},
//...
},
swiperItems:[
{
title:'tab1',
bg:'#b3faa8'
},
{
title:'tab2',
bg:'green'
},
{
title:'tab3',
bg:'yellow'
},
{
title:'tab4',
bg:'#7d86fa'
},
{
title:'tab5',
bg:'white'
},
{
title:'tab6',
bg:'pink'
},
{
title:'tab7',
bg:'#fa425f'
},
]
}
computed = {}
methods = {
/*
@desc:點擊tab操作
*/
switchTab(e){
let ids = e.currentTarget.dataset.id;
let index = ids.replace('tab','');
//這裏可以根據下標來分別請求不同page的數據
this.currents = index-1;
this.navScrollLeft = (index-2)*45;
this.currentTab = ids;
this.showMore = false;
this.showView = ids;
this.$apply();
},
openMore(){
this.showMore = true
},
/*
@desc:手動滑動swiper到下一個swiper-item顯示時觸發
*/
swiperChange(e){
let index = e.detail.current/1+1;
let _this = this;
//這裏可以根據下標來分別請求不同page的數據
//這裏拿第tab2做數據加載模擬
if(index==4){
wx.showLoading({
title: '數據請求中',
mask: true
});
setTimeout(()=>{
wx.hideLoading();
_this.mockData+=mockData;
_this.$apply()
},3000)
}
this.navScrollLeft = (index-2)*45;
this.showView = 'tab'+index;
this.currentTab = 'tab'+index;
this.$apply()
},
scroll(e){
// console.log("滾動事件:"+e)
},
onRBottom(){
let _this = this;
if(!this.isLoading){
_this.isLoading = true;
//模擬請求
wx.showLoading({
title: '數據請求中',
mask: true
});
setTimeout(()=>{
_this.mockData+=mockData;
wx.hideLoading();
_this.isLoading = false;
//這裏一定要記得加上$apply方法出行渲染頁面，否則高度沒更新，會導致scroll組件無法識別新高度而重複觸發底部請求
_this.$apply()
},3000)
}
}
}
systemType () {
const systemInfo = wx.getSystemInfoSync();
const rate = 750 / systemInfo.windowWidth;
this.windowHeight = systemInfo.windowHeight * rate;
this.$apply();
}
onLoad() {
// 頁面準備完成之後獲取每個分類距離頂部的高度, 存儲在數組productsTop中
this.systemType()
}
}
</script>
<style lang="less">
.pick_tab_box {
position: fixed;
top: 0;
display: flex;
align-items: center;
white-space: nowrap;
width: 88%;
background: white;
z-index: 22;
}
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
.tabItem {
box-sizing: border-box;
padding: 20rpx 50rpx;
display: inline-flex;
justify-content: center;
font-size: 30rpx;
}
.tab_active {
color: #fa425f;
position: relative;
}
.tab_active::after{
content: '';
bottom: 0;
left: 50%;
transform: translateX(-50%);
position: absolute;
height: 3px;
width: 30px;
border-radius: 8px;
background: linear-gradient(to right,rgba(225, 215, 69, 25) , greenyellow);
}
.btn-more{
position: fixed;
right: 0;
top: 0;
background: rgba(0,0,0,.3);
height: 47px;
line-height: 47px;
width: 51px;
text-align: center;
color: white;
z-index: 333;
box-shadow: -1px 0px 0px rgba(0,0,0,0.1);
}
.swiperBox{
position: fixed;
top: 47px;
width: 100%;
left: 0;
bottom: 0
}
.swiper-item{
min-height: 100vh;
padding: 10px 10px 100px 10px;
}
</style>