今天給大家分享一下如何實現微信小程序左右菜單欄聯動效果（相關代碼模塊我已單獨整理放到github上面了，歡迎前來start），具體過程如下：
效果圖：
github地址：https://github.com/sunshime/weChatSkill
一、wxml文件
這裏需要注意的一點是：右邊列表循環的那一項必須要加上 id="scroll-{{index}}" ，少了這個是無法實現左邊聯動右邊的效果的，這個坑我踩了很多次，所以在這裏重點強調一下。
<!-- 實現左右聯動效果 -->
<view class="link">
<!-- 左邊 -->
<scroll-view class="left" scroll-y scroll-with-animation scroll-top="{{scrollTops}}">
<view class="item {{tabCur===index?'active':''}}" wx:for="{{list}}" wx:key="index" data-index="{{index}}" bindtap="tabNav">{{item.name}}</view>
</scroll-view>
<!-- 右邊 -->
<scroll-view class="right" scroll-y scroll-with-animation scroll-into-view="scroll-{{rightCur}}" bindscroll="scrollLink">
<!-- 重點： id="scroll-{{index}}" 這個必須要有 不然實現不了左邊聯動右邊的效果-->
<view wx:for="{{list}}" wx:key="{{index}}" class="right-cont" id="scroll-{{index}}">
<view class="title">{{item.name}}</view>
<view class="content">
<view class="list-item" wx:for="{{item.list}}" wx:key="{{indexs}}" wx:for-index="indexs" wx:for-item="items">{{items}}</view>
</view>
</view>
</scroll-view>
</view>
二、wxss文件
.link {
width: 100%;
height: 100%;
display: flex;
}
.left {
width: 220rpx;
/* 這裏的高度可以寫也可以不寫，效果還是可以實現的，不過最好還是寫上吧 */
height: 100vh;
background-color: rgb(229, 243, 243);
text-align: center;
color: #333;
}
.left .item {
line-height: 50px;
font-size: 34rpx;
}
.active {
background-color: tomato;
color: #fff;
}
.right {
/* 這裏的高度可寫也可不寫，效果還是可以實現的，不過最好還是寫上吧 */
height: 100vh;
background-color: #f8f8f8;
padding: 0 30rpx;
}
.right-cont {
padding-bottom: 30rpx;
border-bottom: 1rpx solid #ccc;
}
.title {
text-align: center;
font-size: 36rpx;
color: #333;
padding-top: 60rpx;
padding-bottom: 20rpx;
}
.content {
padding: 0 5rpx 0 20rpx;
}
.list-item{
font-size: 32rpx;
color: #333;
line-height: 50rpx;
}
三、js文件
import category from '../../api/category'
Page({
/**
* 頁面的初始數據
*/
data: {
list: category,
scrollTops: 0, // 要滾動的高度
tabCur: 0, // 當前項
rightCur: 0, // 用於實現左邊聯動右邊
},
// 切換左邊菜單並聯動右邊
tabNav(e) {
let index = e.currentTarget.dataset.index;
this.setData({
tabCur: index,
rightCur: index,
// 實現左邊自動滑動到某個位置 4表示自動滑動到 第五項 （4爲索引值）
scrollTops: (index - 4) * 50
})
},
/**
* 滑動右邊對應左邊菜單切換
* 1、拿到該元素的高度，設定它的top和bottom
* 2、判斷滑動的距離是否大於 設定的top並小於設定的bottom，然後對應左邊菜單的滑動
*/
scrollLink(e) {
let list = this.data.list
let itemHeight = 0;
for (let i = 0; i < list.length; i++) {
//拿到每個元素
let els = wx.createSelectorQuery().select("#scroll-" + i);
els.fields({
size: true
}, function (res) {
list[i].top = itemHeight;
itemHeight += res.height;
list[i].bottom = itemHeight
}).exec()
}
this.setData({
list
})
// 拿到滾動的高度
let scrollTop = e.detail.scrollTop;
for (let i = 0; i < list.length; i++) {
if (scrollTop > list[i].top && scrollTop < list[i].bottom) {
this.setData({
tabCur: i,
scrollTops: (i - 4) * 50
})
return false
}
}
}
})
引入的category文件（我這邊是分開寫的，所以這裏單獨列出來）
const category = [{
name: '梨花雪',
list: [
'時光年輪一圈圈轉着。',
'現在，他站在原地，回首望去，從前點點滴滴，瑣瑣碎碎。',
'猛然發現，自己已走過了這麼多。',
'他想，如果再次遇到下雪天，他會毫不猶豫迎上去，',
'因爲那裏，有舊時光味道。他仍在懷念，仍在留戀。懷念，白雪紛揚日子。'
]
}, {
name: '冰雪消融',
list: [
'友情是每個人都應有的東西，而且相當的珍貴，',
'在朋友之間，難免會產生分歧，讓友情結冰，',
'但我現在知道，友情上消融的冰雪是暖的。'
]
},
{
name: '境由心造',
list: [
'有人安於某種生活，有人不能。',
'因此能安於自已目前處境的不妨就如此生活下去，不能的只好努力另找出路。',
'你無法斷言哪裏纔是成功的，也無法肯定當自已到達了某一點之後，會不會快樂。',
'有些人永遠不會感到滿足，他的快樂只建立在不斷地追求與爭取的過程之中，',
'因此，他的目標不斷地向遠處推移。這種人的快樂可能少，但成就可能大。'
]
},
{
name: '處世之道',
list: [
'有一羣豪豬，就是野豬啊，身上長刺的那種野豬，',
'大家擠在一起過冬，它們老有一個困惑，',
'就是不知道大家在一起以什麼樣的距離最好，',
'離得稍微遠一點，冬天就冷，互相借不着熱氣，大家就往一起湊湊。',
'結果一旦湊近了，彼此的刺都扎着對方了。',
'就又開始遠離。',
'但是再遠的話大家又覺得寒冷，',
'又想借助別人的溫暖，就再湊，湊着湊着又受傷了，',
'然後再拉遠，多少次磨合以後豪豬們終於找到了一種最最恰如其分的距離，',
'那就是在彼此不傷害的前提下，保持着羣體的溫暖'
],
},
{
name: '夏天',
list: [
'夏天的夜色很美，清爽的晚風哼着小曲來到了我們身邊，',
'給我們送來了一絲絲涼意。',
'夜空中，星星眨着眼睛，靜靜地聽着月亮姐姐講故事。',
'這動聽的故事，激發了星星們的想象，',
'星星們都在竊竊私語地討論着，難道是在討論演講稿，到哪裏發表演講嗎？',
'周圍一片寧靜，只有晚風在低低地吟唱，',
'月光灑向永不停息的小河，灑向盛開在夜晚的流星花，彷彿一切都活了。',
'螢火蟲提着小燈籠，殷勤地照看着花兒、草兒，讓他們快快長大、開花。'
]
}, {
name: '風箏',
list: [
'一隻跌落在腳邊的風箏把我拉回到現實。',
'是啊！無論風箏飛的多高、多遠，但都離不開手中的絲線，',
'最後還是要回到地面。人不也一樣嗎？',
'長大了，成家了，但無論離開故鄉多遠，離開親人多遠，你的心還在故鄉，還在父母親人的身邊啊！'
]
}, {
name: '春雨',
list: ['我赤腳站到院中，踩在青石板上，',
'任雨水在我臉上流淌，我不禁擡起頭望着那天空，',
'努力的想要看清春雨的樣子，卻怎麼也看不清，',
'只聽得見耳邊的聲音，那麼清晰那麼讓人心情舒暢。',
'這溫柔的春雨，帶來他最動聽的聲音，擊打着石臺，',
'發出清脆的響聲，聲音透過雨簾，透進了我的心。'
]
}, {
name: '擁有',
list: [
'擁有誠實，就捨棄了虛僞；',
'擁有充實，就捨棄了無聊；擁有踏實，就捨棄了浮躁。',
'不論是有意的丟棄，還是意外的失去，只要曾經真實的擁有，在一些時候，大度的捨棄不也是一種境界嗎？',
'在不經意所失去的， 你還可以重新去爭取。 ',
'丟掉了愛心， 你可以在春天裏尋覓， 丟掉了意志， 你要在冬天重新磨礪。 ',
'但是丟掉了懶惰， 你卻不能把它拾起。 ',
'慾望太多， 反成了累贅， 還有什麼比擁有淡泊的心胸， 更能讓自己充實、 滿足呢？ '
]
}, {
name: "信任",
list: [
'信任一個人有時需要許多年的時間。',
'因此，有些人甚至終其一生也沒有真正信任過任何一個人，',
'倘若你只信任那些能夠討你歡心的人，那是毫無意義的；',
'倘若你信任你所見到的每一個人，那你就是一個傻瓜；',
'倘若你毫不猶疑、匆匆忙忙地去信任一個人，那你就可能也會那麼快地被你所信任的那個人背棄；',
'倘若你只是出於某種膚淺的需要去信任一個人，那麼旋踵而來的可能就是惱人的猜忌和背叛；',
'但倘若你遲遲不敢去信任一個值得你信任的人，那永遠不能獲得愛的甘甜和人間的溫暖，你的一生也將會因此而黯淡無光。'
]
}, {
name: '生命',
list: [
'應當承認，生命就是希望。',
'應當說，卑鄙和庸俗不該得意過早，不該誤認爲它們已經成功地消滅了高尚和真純。',
'僞裝也同樣不能持久，因爲時間像一條長河在滔滔沖刷，',
'卑鄙者、奸商和俗棍不可能永遠戴着教育家、詩人和戰士的桂冠。',
'在他們暢行無阻的生涯盡頭，他們的後人將長久地感到羞辱。'
]
}, {
name: '閒情',
list: [
'終日休息着，睡和醒的時間界限，便分得不清。',
'有時在中夜，覺得精神很圓滿。',
'——聽得疾雷雜以疏雨，每次電光穿入，',
'將窗臺上的金鐘花，輕淡清澈的映在窗簾上，又急速的隱抹了去。',
'而餘影極分明的，印在我的腦膜上。我看見“自然”的淡墨畫，這是第一次。'
]
}, {
name: '背影',
list: [
'我與父親不相見已二年餘了，我最不能忘記的是他的背影。',
'那年冬天，祖母死了，父親的差使也交卸了，正是禍不單行的日子，',
'我從北京到徐州，打算跟着父親奔喪回家。',
'到徐州見着父親，看見滿院狼藉的東西，又想起祖母，不禁簌簌地流下眼淚。',
'父親說，“事已如此，不必難過，好在天無絕人之路！”'
]
}, {
name: '鄉愁',
list: [
'經過多年的風雨磨礪，我們突然意識到：',
'那些曾在生命中撫慰過我們的精神驛站，',
'那些曾溫暖和光明過我們的貧寒童年的火光，',
'卻在不經意間，漸漸地離我們遠了，',
'模糊了——譬如母親、譬如童年的老屋、隔壁家羊角辮搖搖擺擺的阿嬌一種難以驅遣的巨大空虛和孤寂襲來，',
'淚水頓時涌上來。這時，我們患了一種蔓延了幾個世紀的病——鄉愁'
]
}, {
name: '天池',
list: [
'從第一眼瞥見天池到和她告別，我一直沉默不語。',
'我不願用一點聲音，來彈破這寧靜。',
'天池一日我的心情是寧靜的，這是我最珍愛的心境。',
'山光湖色隨着日影的移動而變幻。',
'午餐後，睡了一會兒，一陣冷氣襲來，就像全身浴在冰山雪水之中。',
'我悄悄起來，不願驚醒別人，獨自走到廊上，',
'再次仔細觀察天池：雪峯與杉林，白與黑相映，格外分明，',
'雪山後涌起的白雲給強烈陽光照得白銀一樣刺眼。'
]
}, {
name: '秋天',
list: [
'秋姑娘又來到了果園裏。',
'果園裏的果子成熟了，葡萄架上掛滿了一串串紫裏透紅的大葡萄，',
'它們相互掩映着自己的身體，太陽出來了，',
'照射在葡萄上就像一顆顆透明的紫色寶石。',
'桔樹上，一個個金黃色的桔子，讓人看了忍不住想咬一口。',
'假如你剝開桔皮，你就可以看見一瓣瓣桔子就像一彎彎虧月時的月亮，晶瑩剔透。'
]
}, {
name: '早晨',
list: [
'清晨的江邊，沒有車水馬龍的喧囂，',
'沒有人聲鼎沸的吵雜，也沒有讓人深感壓抑的匆匆人羣。',
'清晨的江邊，有的只是垂柳的迎風飄拂，',
'有的只是枝頭小鳥的婉轉歌唱，',
'有的只是江風中蘊含着的淡淡的腥味。',
'清晨的江邊，很靜，',
'靜的可以撫平內心的煩躁，',
'清晨的江邊，很美，綠樹紅花、微風拂面，不允許你攜帶任何憂傷。'
]
}, {
name: '夏天',
list: [
'夏天是萬物生機勃勃的季節，百花爭奇鬥豔，',
'那麼你知道都有哪些花是夏季開放的嗎？跟隨美文網小編一起來看看吧。',
' 描寫夏天植物的美文摘抄：荷花吟 微風拂過平靜的湖面，給湖面留下片片',
]
}, {
name: '欒樹',
list: [
'欒樹 十二月初，深圳，我在校園的青石板小路上撿到了欒樹的蒴果。',
' 欒樹蒴果看上去有種似曾相識的漂亮--三瓣又薄又脆的果皮圍攏成三棱形，',
'前端小心翼翼地開着口'
]
}, {
name: '荷塘',
list: [
'又是一年荷塘色 初夏早上六點，',
'清亮透明的月兒還躲藏在雲朵裏，不忍離去，',
'校園內行人稀少，我騎着單車，晃晃悠悠的耷拉着星鬆的睡眼。',
'校園內景色如常，照樣是綠'
]
}
]
export default category;
以上就是實現的代碼，相應的各個步驟解釋我直接在代碼中註釋了，大家可以多看幾次代碼的實現過程，然後做出自己需要的效果。