背景
?? swiper+scroll-view實(shí)現(xiàn)滑動(dòng)/點(diǎn)擊切換Tab，以及scroll-left的使用~
??文末分享源代碼。記得點(diǎn)贊+關(guān)注+收藏！
1.實(shí)現(xiàn)效果
2.實(shí)現(xiàn)步驟
2.1 scroll-view實(shí)現(xiàn)tab列表
scroll-view：
可滾動(dòng)視圖區(qū)域。使用豎向滾動(dòng)時(shí)，需要給scroll-view一個(gè)固定高度，通過 WXSS 設(shè)置 height。組件屬性的長度單位默認(rèn)為px。
scroll-x（boolean）：允許橫向滾動(dòng)
scroll-y（boolean）：允許縱向滾動(dòng)
scroll-left(number/string)：設(shè)置橫向滾動(dòng)條位置
scroll-with-animation(boolean)：在設(shè)置滾動(dòng)條位置時(shí)使用動(dòng)畫過渡
- 定義一個(gè)tab列表，scroll-view包裹，允許橫向滾動(dòng)，設(shè)置scroll-left默認(rèn)為0
- 每個(gè)tab設(shè)置為display: inline-block，scroll-view設(shè)置 white-space: nowrap不換行
<scroll-view scroll-x class="container-head-sc" scroll-left="{{sleft}}" scroll-with-animation="true">
<view class="item" wx:key="list" wx:for="{{list}}" wx:for-index="index">tab-{{index+1}} </view>
</scroll-view>
.container-head-sc {
height: 50rpx;
border-radius: 25rpx;
background: #eeece4;
color: #333;
white-space: nowrap;
}
.container-head-sc .item {
padding: 0 20rpx;
min-width: 90rpx;
text-align: center;
line-height: 50rpx;
font-size: 26rpx;
display: inline-block;
height: 50rpx;
}
- 給每個(gè)tab設(shè)置vertical-align: top;防止高度塌陷
.container-head-sc .item{
/* 防止高度塌陷 */
+ vertical-align: top;
}
- 添加當(dāng)前激活tab樣式，定義當(dāng)前選中項(xiàng)索引currentTab默認(rèn)為0（即選中第一個(gè)），當(dāng)currentTab==列表的某一項(xiàng)索引表示選中
<view class="item {{currentTab == index ?'active':''}}" data-current="{{index}}" catchtap="handleTabChange" wx:key="list" wx:for="{{list}}" wx:for-index="index">tab-{{index+1}} </view>
.container-head-sc .active {
color: #ffffff;
font-weight: bold;
background: orange;
border-radius: 25rpx;
}
- 添加切換事件
handleTabChange(e) {
let { current } = e.target.dataset;
if (this.data.currentTab == current || current === undefined) return;
this.setData({
currentTab: current,
});
},
2.2 swiper+scroll-iew 實(shí)現(xiàn)內(nèi)容列表
swiper：
滑塊視圖容器。默認(rèn)高度為150px；
current（number）：當(dāng)前所在滑塊的 index，默認(rèn)為0
autoplay(boolean):是否自動(dòng)切換
bindchange(eventhandle):current 改變時(shí)會(huì)觸發(fā) change 事件，event.detail = {current, source}
- swiper包裹內(nèi)容列表，需要為swiper指定高度，這里我們?cè)O(shè)置為撐滿一屏
文章來源：http://www.zghlxwxcb.cn/news/detail-804613.html
/* swiper默認(rèn)高度為150px */
.container-swiper {
height: calc(100% - 110rpx);
}
- 設(shè)置swiper的current為當(dāng)前選中的tab標(biāo)簽索引，即currentTab
<swiper current="{{currentTab}}" class="container-swiper">
<swiper-item class="flex-column j_c" wx:for="{{list}}" wx:key='index'>
</swiper-item>
</swiper>
- swiper-item展示內(nèi)容列表，用scroll-view包裹內(nèi)容，設(shè)置豎向滾動(dòng)，使用豎向滾動(dòng)時(shí)，需要給scroll-view一個(gè)固定高度，這里將scroll-view高度設(shè)置為100%，與swiper同高，鋪滿一屏
<swiper-item class="flex-column j_c" wx:for="{{list}}" wx:key='index'>
<scroll-view scroll-y class="container-swiper-sc">
<view class="flex-wrap flex-row items">
....//內(nèi)容
</view>
</scroll-view>
</swiper-item>
.container-swiper-sc {
height: 100%;
}
- swiper添加bindchange事件，當(dāng)滑動(dòng)時(shí)候，動(dòng)態(tài)的設(shè)置currentTab，實(shí)現(xiàn)tab列表的同步更新
<swiper current="{{currentTab}}" bindchange="handleSwiperChange" class="container-swiper">
....//內(nèi)容
</swiper>
handleSwiperChange(e) {
this.setData({
currentTab: e.detail.current,
});
},
- 可以發(fā)現(xiàn)，當(dāng)swiper所在滑塊的 index超出tab列表的可視范圍，我們得手動(dòng)滑動(dòng)tab列表才能看見當(dāng)前所選中的tab
- 找到2.1節(jié) scroll-left=“{{sleft}}”，scroll-left用來設(shè)置橫向滾動(dòng)條位置，也就是說，我們可以監(jiān)聽swiper的滾動(dòng)，在滑塊所在的index改變的時(shí)候，去動(dòng)態(tài)的設(shè)置scroll-left的位置
- scroll-left的計(jì)算
wx.createSelectorQuery():
返回一個(gè) SelectorQuery 對(duì)象實(shí)例
SelectorQuery.selectAll(string selector):
在當(dāng)前頁面下選擇匹配選擇器 selector 的所有節(jié)點(diǎn)。文章來源地址http://www.zghlxwxcb.cn/news/detail-804613.html
getScrollLeft() {
const query = wx.createSelectorQuery();
query.selectAll(".item").boundingClientRect();
//這里將會(huì)返回頁面中所有class為item的節(jié)點(diǎn)，個(gè)數(shù)為tab列表的長度
query.exec((res) => {
let num = 0;
for (let i = 0; i < this.data.currentTab; i++) {
num += res[0][i].width;
}
// 計(jì)算當(dāng)前currentTab之前的寬度總和
this.setData({
sleft: Math.ceil(num),
});
});
},
- 修改swiper的bindchange事件，每次滑塊的變化，都重新計(jì)算scroll-left的大小
handleSwiperChange(e) {
+ this.getScrollLeft();
},
3.實(shí)現(xiàn)代碼
<view class="head flex-row">
<view class="head-title">scroll-left</view>
</view>
<scroll-view scroll-y class="container">
<view class="container-head flex-row">
<scroll-view scroll-x class="container-head-sc" scroll-left="{{sleft}}" scroll-with-animation="true">
<view class="item {{currentTab == index ?'active':''}}" data-current="{{index}}" catchtap="handleTabChange" wx:key="list" wx:for="{{list}}" wx:for-index="index">tab-{{index+1}} </view>
</scroll-view>
</view>
<swiper current="{{currentTab}}" bindchange="handleSwiperChange" class="container-swiper">
<swiper-item class="flex-column j_c" wx:for="{{list}}" wx:key='index'>
<scroll-view scroll-y class="container-swiper-sc">
<view class="flex-wrap flex-row items">
<block wx:for="{{item}}" wx:key="index">
<image src="https://i.postimg.cc/mgsKJGLw/susu1.jpg" mode="aspectFill" class="item-img" />
</block>
</view>
</scroll-view>
</swiper-item>
</swiper>
</scroll-view>
page {
background-color: #ffa500;
height: 100%;
}
.head {
height: 90rpx;
color: #333;
font-size: 30rpx;
padding-left: 30rpx;
font-weight: bold;
padding-bottom: 10rpx;
box-sizing: border-box;
}
.head-title {
position: relative;
display: inline-block;
height: 100%;
}
.head-title::after {
content: '';
position: absolute;
z-index: 99;
width: 15px;
height: 15px;
margin-left: -15rpx;
border-top: 3px solid #333;
border-right: 3px solid #333;
border-top-right-radius: 100%;
transform: rotate(-225deg);
left: 50%;
bottom: 3px;
}
.container {
width: 100%;
height: calc(100% - 90rpx);
background-color: #fff;
overflow: hidden;
border-radius: 30rpx 30rpx 0 0;
}
.container-head {
width: 100%;
height: 110rpx;
box-sizing: border-box;
padding: 10rpx 20rpx;
}
.container-head-sc {
height: 50rpx;
border-radius: 25rpx;
background: #eeece4;
color: #333;
white-space: nowrap;
}
.container-head-sc .item {
padding: 0 20rpx;
min-width: 90rpx;
text-align: center;
line-height: 50rpx;
font-size: 26rpx;
display: inline-block;
/* 引起高度塌陷 */
vertical-align: top;
height: 50rpx;
}
.container-head-sc .active {
color: #ffffff;
font-weight: bold;
background: orange;
border-radius: 25rpx;
}
/* swiper默認(rèn)高度為150px */
.container-swiper {
height: calc(100% - 110rpx);
}
.container-swiper-sc {
height: 100%;
}
.container-swiper-sc .items {
padding: 0 2%;
width: 100%;
box-sizing: border-box;
}
.container-swiper-sc .items .item-img {
width: 30vw;
height: 30vw;
margin-right: 2.8%;
margin-bottom: 10rpx;
flex-shrink: 0;
}
.container-swiper-sc .items .item-img:nth-child(3n+3) {
margin-right: 0;
}
/* 隱藏scroll-view的滾動(dòng)條 */
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
Page({
data: {
currentTab: 0,
sleft: "", //橫向滾動(dòng)條位置
list: [1, 2, 3, 4, 5, 6, 7, 22, 32],//測試列表
},
handleTabChange(e) {
let { current } = e.target.dataset;
if (this.data.currentTab == current || current === undefined) return;
this.setData({
currentTab: current,
});
},
handleSwiperChange(e) {
this.setData({
currentTab: e.detail.current,
});
this.getScrollLeft();
},
getScrollLeft() {
const query = wx.createSelectorQuery();
query.selectAll(".item").boundingClientRect();
query.exec((res) => {
let num = 0;
for (let i = 0; i < this.data.currentTab; i++) {
num += res[0][i].width;
}
this.setData({
sleft: Math.ceil(num),
});
});
},
});
4.寫在最后??
看完本文如果覺得有用，記得點(diǎn)贊+關(guān)注+收藏鴨 ??
更多小程序相關(guān)，關(guān)注??蘇蘇的bug，??蘇蘇的github，??蘇蘇的碼云~
到了這里，關(guān)于微信小程序?qū)崿F(xiàn)滑動(dòng)/點(diǎn)擊切換Tab的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
