今日給大家分享一下如何實現導航欄（nav）和內容部分上下聯動（相關程式碼模組我已單獨整理放到github上面了，歡迎前來start）。

github地址：https://github.com/sunshime/weChatSkill

一、效果圖：

二、實現過程：

   主要是使用 scroll-view 實現導航欄部分，用 swiper 實現下面的內容部分，通過 swiper 的 current 屬性和導航欄的 index 相互對應來實現導航欄部分切換時內容部分跟隨切換；通過 swiper 的bindchange 事件拿到當前輪播的索引，對應賦值實現導航欄隨著內容切換的效果。

這裡有幾點是有必要注意一下的：

• scroll-view 標籤必須加上行內樣式 overflow:hidden;white-space:nowrap; 否則無法實現滑動效果；
• scroll-view 包裹的要滑動的盒子元素要讓它們變成行內塊級元素（display:inline-block;）進行橫向排列；
• scroll-view 包裹的需要滑動的盒子元素使用 display:flex; 是不起作用（無效）的；
• scroll-view 包裹的需要滑動的盒子元素不能使用浮動。

三、相關程式碼如下：

（一）wxml

<view class="uplink">
	<scroll-view scroll-x scroll-with-animation scroll-left="{{scrollLefts}}" class="scroll-top" style="overflow:hidden;white-space:nowrap;">
		<view class="top-item {{curIndex===index?'active':''}}" wx:for="{{list}}" wx:key="index" data-index="{{index}}" bindtap="tabNav">{{item.name}}</view>
	</scroll-view>
	<swiper class="swiper" current="{{curIndex}}" bindchange="changeScroll" duration="{{duration}}">
		<swiper-item wx:for="{{list}}" wx:key="index" class="swipers-item">{{item.list}}</swiper-item>
	</swiper>
</view>

（二）wxss

.uplink {
 width: 100%;
 height: 100%;
}

.scroll-top {
 height: 100rpx;
 line-height: 100rpx;
 width: auto;
 background-color: #fff5f5;
}

.top-item {
 display: inline-block;
 width: 65px;
 text-align: center;
 font-size: 32rpx;
 color: #333;
}

.active {
 font-size: 36rpx;
 color: rgb(216,27,27);
}

.swiper {
 padding: 20rpx 30rpx;
 height: 100vh;
}

.swipers-item {
 font-size: 32rpx;
 color: #333;
 line-height: 60rpx;
 text-indent: 70rpx;
}

（三）js

import linkageList from '../../api/linkage'
Page({

 /**
  * 頁面的初始資料
  */
 data: {
  list: linkageList,curIndex: 0,scrollLefts: 0,duration:300
 },// 導航欄滑動
 tabNav(e) {
  let index = e.target.dataset.index;
  this.setData({
   curIndex: index,scrollLefts: (index - 2) * 65
  })
 },// 內容滑動
 changeScroll(e) {
  let index = e.detail.current;
  this.setData({
   curIndex: index,scrollLefts: (index - 2) * 65
  })
 }
})

（四）模擬資料檔案

const linkageList = [{
  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 linkageList;

總結

到此這篇關於微信小程式實現導航欄和內容上下聯動功能的文章就介紹到這了,更多相關微信小程式導航欄和內容上下聯動內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！