效果圖:
一、簡介
自己的小程序需要實現(xiàn)這樣的功能
1.核心思想
swiper 和scroll-view共用兩個變量currentTab navScrollLeft，當點擊nav或者滑動swiper時設(shè)置兩個變量的值為當前的index
二、實現(xiàn)
tab導航欄使用<scroll-view>標簽，內(nèi)容使用<swiper>
1.wxml實現(xiàn)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<view class="container"> <!-- tab導航欄 --> <!-- scroll-left屬性可以控制滾動條位置 --> <!-- scroll-with-animation滾動添加動畫過渡 --> <!-- scroll-x="true" navScrollLeft: 0初值 navData：tab text 使用 wx:for-item 可以指定數(shù)組當前元素的變量名， 使用 wx:for-index 可以指定數(shù)組當前下標的變量名： --> <!--tabs --> <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"> <!-- 判斷是否選中，選中設(shè)置樣式 --> <!-- switchNav --> <view class="nav-item {{currentTab == idx ?'active':''}}" data-current="{{idx}}" bindtap="switchNav"> {{navItem.text}}</view> </block> </scroll-view> <!-- 頁面內(nèi)容 --> <!-- duration="300"：滑動動畫時長 --> <!-- switchTab --> <swiper class="tab-box" current="{{currentTab}}" duration="300" bindchange="switchTab"> <swiper-item wx:for="{{[0,1,2,3,4,5,6]}}" wx:for-item="tabItem" wx:for-index="idx" wx:key="idx" class="tab-content"> {{tabItem}} </swiper-item> </swiper></view> |
2.js實現(xiàn)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
|
//index.js//獲取應用實例const app = getApp()Page({ data: { navData:[ { text: '新聞' }, { text: '表白' }, { text: '外賣' }, { text: '當家教' }, { text: '找家教' }, { text: '租房子' }, { text: '駕校' } ], currentTab: 0, navScrollLeft: 0 }, //事件處理函數(shù) onLoad: function () { }, switchNav(event){ // 獲取當前tab 的id var cur = event.currentTarget.dataset.current; //每個tab選項寬度占1/5 var singleNavWidth = this.data.windowWidth / 5; //tab選項居中 this.setData({ navScrollLeft: (cur - 2) * singleNavWidth }) // 判斷id是否和點擊的tab id 一致 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 }); }}) |
3.wxss實現(xiàn)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
|
/**index.wxss**/page { width: 100%; height: 100%;}.container { width: 100%; height: 100%;}.nav { /* 設(shè)置tab-nav寬高度 */ height: 80rpx; width: 100%; /* 假如您需要并排放置兩個帶邊框的框， 可通過將 box-sizing 設(shè)置為 "border-box"。 */ box-sizing: border-box; overflow: hidden; /* 居中 */ line-height: 80rpx; background: #f7f7f7; font-size: 16px; /* 規(guī)定段落中的文本不進行換行： */ 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: green;}.tab-box { background: rgb(31, 201, 96); /* 這里設(shè)置成nav的高度 */ padding-top: 80rpx; height: 100%; box-sizing: border-box;}.tab-content { /* 裁剪 div 元素中內(nèi)容的左/右邊緣 - 如果溢出元素的內(nèi)容區(qū)域的話： */ overflow-y: scroll;} |
三、參考和總結(jié)
此文章參考 http://www.zmynmublwnt.cn/article/221159.html
解決過程
1.tab的寬度固定為1/5,可以改進成根據(jù)tab的內(nèi)容變化
四、優(yōu)化
0.效果圖
1.每個tab長度自適應 2.先前隔tab點擊時
如果當前處于1，點擊3時，路徑時1-2-3，真機測試后，會直接跳轉(zhuǎn)3，不會影響體驗
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
// *******************************導航欄選擇獲取id和導航欄的位置************************************** tabSelect(e) { console.log("結(jié)果：", e); // 操作新聞數(shù)據(jù)庫 var cur = e.currentTarget.dataset.id; //tab選項居中 this.setData({ // 每一個tab的id TabCur: e.currentTarget.dataset.id, //自適應 scrollLeft: (e.currentTarget.dataset.id) * 60, }) // 判斷id是否和點擊的tab id 一致 if (this.data.currentTab == cur) { return false; } else { this.setData({ currentTab: cur }) } console.log(e.currentTarget.dataset.id); console.log(this.data.TabCur); console.log("橫向滾動條位置", this.data.scrollLeft); }, switchTab(e) { console.log(e); var cur = e.detail.current; this.setData({ TabCur: cur, scrollLeft: cur * 60, }); } |
到此這篇關(guān)于微信小程序tab左右滑動切換功能的實現(xiàn)代碼的文章就介紹到這了,更多相關(guān)小程序tab滑動切換內(nèi)容請搜索服務(wù)器之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持服務(wù)器之家！
原文鏈接：https://blog.csdn.net/Sir514/article/details/113742415
