微信小程序tab切換，可滑動切換，導航欄跟隨滾動實現
簡介
看到今日頭條小程序頁面可以滑動切換，而且tab導航條也會跟著滾動，點擊tab導航，頁面滑動，切導航欄也會跟著滾動，就想著要怎麽實現這個功能
像商城類商品類目如果做成左右滑動切換類目用戶體驗應該會好很多，我這裏只是一個小demo，沒有怎麽去考慮數據的問題，主要是想著去實現這麽個功能，有可能後期引入數據後會出現問題，歡迎提出互相討論
解決過程
1.在想要實現這個問題的時候找了不少別人的博客看，主體頁面布局方面是比較統一的，tab導航欄使用<scroll-view>標簽，內容使用<swiper>，其中的使用方法和參數希望自行參考api文檔，不過多解釋
布局代碼如下：
wxml
<view class="container">
<!-- tab導航欄 -->
<!-- scroll-left屬性可以控制滾動條位置 -->
<!-- scroll-with-animation滾動添加動畫過渡 -->
<scroll-view scroll-x="true" class="nav" scroll-left="{{navScrollLeft}}" scroll-with-animation="{{true}}">
<block wx:for="{{navData}}" wx:for-index="idx" wx:for-item="navItem" wx:key="idx">
<view class="nav-item {{currentTab == idx ?‘active‘:‘‘}}" data-current="{{idx}}" bindtap="switchNav">{{navItem.text}}</view>
</block>
</scroll-view>
<!-- 頁面內容 -->
<swiper class="tab-box" current="{{currentTab}}" duration="300" bindchange="switchTab">
<swiper-item wx:for="{{[0,1,2,3,4,5,6,7,8]}}" wx:for-item="tabItem" wx:for-index="idx" wx:key="idx" class="tab-content">
{{tabItem}}
</swiper-item>
</swiper>
</view>
wxss
/**index.wxss**/
page{
width: 100%;
height: 100%;
}
.container{
width: 100%;
height: 100%;
}
.nav {
height: 80rpx;
width: 100%;
box-sizing: border-box;
overflow: hidden;
line-height: 80rpx;
background: #f7f7f7;
font-size: 16px;
white-space: nowrap;
position: fixed;
top: 0;
left: 0;
z-index: 99;
}
.nav-item {
width: 20%;
display: inline-block;
text-align: center;
}
.nav-item.active{
color: red;
}
.tab-box{
background: greenyellow;
padding-top: 80rpx;
height: 100%;
box-sizing: border-box;
}
.tab-content{
overflow-y: scroll;
}
js
//index.js
//獲取應用實例
const app = getApp()
Page({
data: {
motto: ‘Hello World‘,
userInfo: {},
hasUserInfo: false,
canIUse: wx.canIUse(‘button.open-type.getUserInfo‘),
navData:[
{
text: ‘首頁‘
},
{
text: ‘健康‘
},
{
text: ‘情感‘
},
{
text: ‘職場‘
},
{
text: ‘育兒‘
},
{
text: ‘糾紛‘
},
{
text: ‘青蔥‘
},
{
text: ‘上課‘
},
{
text: ‘下課‘
}
],
currentTab: 0,
navScrollLeft: 0
},
//事件處理函數
onLoad: function () {
if (app.globalData.userInfo) {
this.setData({
userInfo: app.globalData.userInfo,
hasUserInfo: true
})
} else if (this.data.canIUse) {
// 由於 getUserInfo 是網絡請求，可能會在 Page.onLoad 之後才返回
// 所以此處加入 callback 以防止這種情況
app.userInfoReadyCallback = res => {
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
} else {
// 在沒有 open-type=getUserInfo 版本的兼容處理
wx.getUserInfo({
success: res => {
app.globalData.userInfo = res.userInfo
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
})
}
wx.getSystemInfo({
success: (res) => {
this.setData({
pixelRatio: res.pixelRatio,
windowHeight: res.windowHeight,
windowWidth: res.windowWidth
})
},
})
},
switchNav(event){
var cur = event.currentTarget.dataset.current;
//每個tab選項寬度占1/5
var singleNavWidth = this.data.windowWidth / 5;
//tab選項居中
this.setData({
navScrollLeft: (cur - 2) * singleNavWidth
})
if (this.data.currentTab == cur) {
return false;
} else {
this.setData({
currentTab: cur
})
}
},
switchTab(event){
var cur = event.detail.current;
var singleNavWidth = this.data.windowWidth / 5;
this.setData({
currentTab: cur,
navScrollLeft: (cur - 2) * singleNavWidth
});
}
})
頁面代碼如上面三部分，可以直接新建一項目進行測試
效果圖如下
註意事項
在處理頂部tab導航跟隨底部頁面滑動的時候遇到一個問題，就是在給<scroll-view>中的scrll-left賦值的時候遇到的問題
邏輯上講初始時tab導航下標小於2時導航欄不滾動，當大於2時向左滑動，以使被選中的導航欄居中，但是當最左側的選項因為左滑看不到後，我又點擊左側選項希望導航往右滑動，能夠看到左邊的導航，按上面的js代碼計算scroll-left會產生負值，但是scroll-left即使為負值，但是滾動條不會向左縮進去，所以即使為負值，相當於為0，當時做的時候一直在思考這個怎麽用邏輯解決，想著要寫各種判斷，計算距離，結果到最後一句代碼直接賦值就搞定了，也是很無語。
小結
以上只是測試demo，可做參考，如有同學通過這個demo引入數據並且成功的話或者失敗的話，歡迎溝通探討！！！
案例二：
小程序商品展示需要導航欄的商品分類進行滑動
效果圖：
首先是滑動的效果：
<scroll-view scroll-x="true" style="width: 100%;white-space:nowrap;">
</scroll-view>
小程序使用</scroll-view>,橫向移動即可
WXML:這裏面我將導航欄顯示類目定義為5個，每個20%,當超出5個分類，也就是index>4的時候，導航欄下面的省略號加上（因為tab-nac的border-bottom只能顯示到第五個分類）
<scroll-view scroll-x="true" style="width: 100%;white-space:nowrap;">
<!-- tab -->
<view class="tab">
<view class="tab-nav" style=‘font-size:12px‘>
<view wx:for="{{tabnav.tabitem}}" bindtap="setTab" data-tabindex="{{index}}" style="min-width:20%;max-width:20%;text-align:center;height: 80rpx;
{{index>4?‘border-bottom: 1rpx dotted #ddd;‘:‘‘}}">{{item.text}}</view>
<view >
<view class="tab-line" style="width:{{100/tabnav.tabnum}}%;transform:translateX({{100*showtab}}%);"></view>
</view>
</view>
</view>
</scroll-view>
wXSS:
.tab{
display: flex;
flex-direction: column;
}
.tab-nav{
height: 80rpx;
background: #fff;
border-bottom: 0.5rpx dotted #ddd;
display: flex;
line-height: 79rpx;
position: relative;
}
.tab-line{
position: absolute;
left: 0;
bottom: -1rpx;
height: 4rpx;
background: #f7982a;
transition: all 0.3s;
}
.tab-content{
flex: 1;
overflow-y: auto;
overflow-x: hidden;
}
JS：
import util from ‘./../../utils/util.js‘;
Page({
data: {
showtab: 0, //頂部選項卡索引
tabnav: {
tabnum: 5,
tabitem: [
{
"id": 0,
"text": "商品分類1"
},
{
"id": 1,
"text": "商品分類2"
},
{
"id": 2,
"text": "商品分類3"
},
{
"id": 3,
"text": "商品分類4"
},
{
"id": 4,
"text": "商品分類5"
},
{
"id": 5,
"text": "商品分類6"
},
{
"id": 6,
"text": "商品分類7"
}
]
},
productList: [],
},
onLoad: function () {
},
setTab: function (e) {
const edata = e.currentTarget.dataset;
this.setData({
showtab: edata.tabindex,
})
},
})
---------------------
作者：皮蛋小粥
來源：CSDN
原文：https://blog.csdn.net/qq442270636/article/details/79084685
版權聲明：本文為博主原創文章，轉載請附上博文鏈接！
微信小程序tab切換，可滑動切換，導航欄跟隨滾動實現