微信小程序?qū)崿F(xiàn)導(dǎo)航欄和內(nèi)容上下聯(lián)動(dòng)功能代碼
今日給大家分享一下如何實(shí)現(xiàn)導(dǎo)航欄(nav)和內(nèi)容部分上下聯(lián)動(dòng)(相關(guān)代碼模塊我已單獨(dú)整理放到github上面了,歡迎前來(lái)start)。
github地址:https://github.com/sunshime/weChatSkill
一、效果圖:

二、實(shí)現(xiàn)過(guò)程:
主要是使用 scroll-view 實(shí)現(xiàn)導(dǎo)航欄部分,用 swiper 實(shí)現(xiàn)下面的內(nèi)容部分,通過(guò) swiper 的 current 屬性和導(dǎo)航欄的 index 相互對(duì)應(yīng)來(lái)實(shí)現(xiàn)導(dǎo)航欄部分切換時(shí)內(nèi)容部分跟隨切換;通過(guò) swiper 的bindchange 事件拿到當(dāng)前輪播的索引,對(duì)應(yīng)賦值實(shí)現(xiàn)導(dǎo)航欄隨著內(nèi)容切換的效果。
這里有幾點(diǎn)是有必要注意一下的:
scroll-view標(biāo)簽必須加上行內(nèi)樣式overflow:hidden;white-space:nowrap;否則無(wú)法實(shí)現(xiàn)滑動(dòng)效果;scroll-view包裹的要滑動(dòng)的盒子元素要讓它們變成行內(nèi)塊級(jí)元素(display:inline-block;)進(jìn)行橫向排列;scroll-view包裹的需要滑動(dòng)的盒子元素使用display:flex;是不起作用(無(wú)效)的;scroll-view包裹的需要滑動(dòng)的盒子元素不能使用浮動(dòng)。
三、相關(guān)代碼如下:
(一)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({
/**
* 頁(yè)面的初始數(shù)據(jù)
*/
data: {
list: linkageList,
curIndex: 0,
scrollLefts: 0,
duration:300
},
// 導(dǎo)航欄滑動(dòng)
tabNav(e) {
let index = e.target.dataset.index;
this.setData({
curIndex: index,
scrollLefts: (index - 2) * 65
})
},
// 內(nèi)容滑動(dòng)
changeScroll(e) {
let index = e.detail.current;
this.setData({
curIndex: index,
scrollLefts: (index - 2) * 65
})
}
})
(四)模擬數(shù)據(jù)文件
const linkageList = [{
name: '梨花雪',
list: [
'時(shí)光年輪一圈圈轉(zhuǎn)著',
'現(xiàn)在,他站在原地,回首望去,從前點(diǎn)點(diǎn)滴滴,瑣瑣碎碎',
'猛然發(fā)現(xiàn),自己已走過(guò)了這么多',
'他想,如果再次遇到下雪天,他會(huì)毫不猶豫迎上去',
'因?yàn)槟抢?,有舊時(shí)光味道。他仍在懷念,仍在留戀。懷念,白雪紛揚(yáng)日子。'
]
}, {
name: '冰雪消融',
list: [
'友情是每個(gè)人都應(yīng)有的東西,而且相當(dāng)?shù)恼滟F',
'在朋友之間,難免會(huì)產(chǎn)生分歧,讓友情結(jié)冰',
'但我現(xiàn)在知道,友情上消融的冰雪是暖的。'
]
},
{
name: '境由心造',
list: [
'有人安于某種生活,有人不能',
'因此能安于自已目前處境的不妨就如此生活下去,不能的只好努力另找出路',
'你無(wú)法斷言哪里才是成功的,也無(wú)法肯定當(dāng)自已到達(dá)了某一點(diǎn)之后,會(huì)不會(huì)快樂(lè)',
'有些人永遠(yuǎn)不會(huì)感到滿足,他的快樂(lè)只建立在不斷地追求與爭(zhēng)取的過(guò)程之中',
'因此,他的目標(biāo)不斷地向遠(yuǎn)處推移。這種人的快樂(lè)可能少,但成就可能大。'
]
},
{
name: '處世之道',
list: [
'有一群豪豬,就是野豬啊,身上長(zhǎng)刺的那種野豬',
'大家擠在一起過(guò)冬,它們老有一個(gè)困惑',
'就是不知道大家在一起以什么樣的距離最好',
'離得稍微遠(yuǎn)一點(diǎn),冬天就冷,互相借不著熱氣,大家就往一起湊湊',
'結(jié)果一旦湊近了,彼此的刺都扎著對(duì)方了',
'就又開(kāi)始遠(yuǎn)離',
'但是再遠(yuǎn)的話大家又覺(jué)得寒冷',
'又想借助別人的溫暖,就再湊,湊著湊著又受傷了',
'然后再拉遠(yuǎn),多少次磨合以后豪豬們終于找到了一種最最恰如其分的距離',
'那就是在彼此不傷害的前提下,保持著群體的溫暖。'
],
},
{
name: '夏天',
list: [
'夏天的夜色很美,清爽的晚風(fēng)哼著小曲來(lái)到了我們身邊',
'給我們送來(lái)了一絲絲涼意',
'夜空中,星星眨著眼睛,靜靜地聽(tīng)著月亮姐姐講故事',
'這動(dòng)聽(tīng)的故事,激發(fā)了星星們的想象',
'星星們都在竊竊私語(yǔ)地討論著,難道是在討論演講稿,到哪里發(fā)表演講嗎',
'周圍一片寧?kù)o,只有晚風(fēng)在低低地吟唱',
'月光灑向永不停息的小河,灑向盛開(kāi)在夜晚的流星花,仿佛一切都活了',
'螢火蟲(chóng)提著小燈籠,殷勤地照看著花兒、草兒,讓他們快快長(zhǎng)大、開(kāi)花。'
]
}, {
name: '風(fēng)箏',
list: [
'一只跌落在腳邊的風(fēng)箏把我拉回到現(xiàn)實(shí)',
'是啊!無(wú)論風(fēng)箏飛的多高、多遠(yuǎn),但都離不開(kāi)手中的絲線',
'最后還是要回到地面。人不也一樣嗎',
'長(zhǎng)大了,成家了,但無(wú)論離開(kāi)故鄉(xiāng)多遠(yuǎn),離開(kāi)親人多遠(yuǎn),你的心還在故鄉(xiāng),還在父母親人的身邊?。?
]
}, {
name: '春雨',
list: ['我赤腳站到院中,踩在青石板上',
'任雨水在我臉上流淌,我不禁抬起頭望著那天空',
'努力的想要看清春雨的樣子,卻怎么也看不清',
'只聽(tīng)得見(jiàn)耳邊的聲音,那么清晰那么讓人心情舒暢',
'這溫柔的春雨,帶來(lái)他最動(dòng)聽(tīng)的聲音,擊打著石臺(tái)',
'發(fā)出清脆的響聲,聲音透過(guò)雨簾,透進(jìn)了我的心。'
]
}, {
name: '擁有',
list: [
'擁有誠(chéng)實(shí),就舍棄了虛偽',
'擁有充實(shí),就舍棄了無(wú)聊;擁有踏實(shí),就舍棄了浮躁',
'不論是有意的丟棄,還是意外的失去,只要曾經(jīng)真實(shí)的擁有,在一些時(shí)候,大度的舍棄不也是一種境界嗎',
'在不經(jīng)意所失去的, 你還可以重新去爭(zhēng)取 ',
'丟掉了愛(ài)心, 你可以在春天里尋覓, 丟掉了意志, 你要在冬天重新磨礪。',
'但是丟掉了懶惰, 你卻不能把它拾起 ',
'欲望太多, 反成了累贅, 還有什么比擁有淡泊的心胸, 更能讓自己充實(shí)、 滿足呢? '
]
}, {
name: "信任",
list: [
'信任一個(gè)人有時(shí)需要許多年的時(shí)間',
'因此,有些人甚至終其一生也沒(méi)有真正信任過(guò)任何一個(gè)人',
'倘若你只信任那些能夠討你歡心的人,那是毫無(wú)意義的',
'倘若你信任你所見(jiàn)到的每一個(gè)人,那你就是一個(gè)傻瓜',
'倘若你毫不猶疑、匆匆忙忙地去信任一個(gè)人,那你就可能也會(huì)那么快地被你所信任的那個(gè)人背棄',
'倘若你只是出于某種膚淺的需要去信任一個(gè)人,那么旋踵而來(lái)的可能就是惱人的猜忌和背叛',
'但倘若你遲遲不敢去信任一個(gè)值得你信任的人,那永遠(yuǎn)不能獲得愛(ài)的甘甜和人間的溫暖,你的一生也將會(huì)因此而黯淡無(wú)光。'
]
}, {
name: '生命',
list: [
'應(yīng)當(dāng)承認(rèn),生命就是希望',
'應(yīng)當(dāng)說(shuō),卑鄙和庸俗不該得意過(guò)早,不該誤認(rèn)為它們已經(jīng)成功地消滅了高尚和真純',
'偽裝也同樣不能持久,因?yàn)闀r(shí)間像一條長(zhǎng)河在滔滔沖刷',
'卑鄙者、奸商和俗棍不可能永遠(yuǎn)戴著教育家、詩(shī)人和戰(zhàn)士的桂冠',
'在他們暢行無(wú)阻的生涯盡頭,他們的后人將長(zhǎng)久地感到羞辱。'
]
}, {
name: '閑情',
list: [
'終日休息著,睡和醒的時(shí)間界限,便分得不清',
'有時(shí)在中夜,覺(jué)得精神很圓滿',
'——聽(tīng)得疾雷雜以疏雨,每次電光穿入',
'將窗臺(tái)上的金鐘花,輕淡清澈的映在窗簾上,又急速的隱抹了去',
'而余影極分明的,印在我的腦膜上。我看見(jiàn)“自然”的淡墨畫(huà),這是第一次。'
]
}, {
name: '背影',
list: [
'我與父親不相見(jiàn)已二年余了,我最不能忘記的是他的背影',
'那年冬天,祖母死了,父親的差使也交卸了,正是禍不單行的日子',
'我從北京到徐州,打算跟著父親奔喪回家',
'到徐州見(jiàn)著父親,看見(jiàn)滿院狼藉的東西,又想起祖母,不禁簌簌地流下眼淚',
'父親說(shuō),“事已如此,不必難過(guò),好在天無(wú)絕人之路!”'
]
}, {
name: '鄉(xiāng)愁',
list: [
'經(jīng)過(guò)多年的風(fēng)雨磨礪,我們突然意識(shí)到',
'那些曾在生命中撫慰過(guò)我們的精神驛站',
'那些曾溫暖和光明過(guò)我們的貧寒童年的火光',
'卻在不經(jīng)意間,漸漸地離我們遠(yuǎn)了',
'模糊了——譬如母親、譬如童年的老屋、隔壁家羊角辮搖搖擺擺的阿嬌一種難以驅(qū)遣的巨大空虛和孤寂襲來(lái)',
'淚水頓時(shí)涌上來(lái)。這時(shí),我們患了一種蔓延了幾個(gè)世紀(jì)的病——鄉(xiāng)愁'
]
}, {
name: '天池',
list: [
'從第一眼瞥見(jiàn)天池到和她告別,我一直沉默不語(yǔ)',
'我不愿用一點(diǎn)聲音,來(lái)彈破這寧?kù)o',
'天池一日我的心情是寧?kù)o的,這是我最珍愛(ài)的心境',
'山光湖色隨著日影的移動(dòng)而變幻',
'午餐后,睡了一會(huì)兒,一陣?yán)錃庖u來(lái),就像全身浴在冰山雪水之中',
'我悄悄起來(lái),不愿驚醒別人,獨(dú)自走到廊上',
'再次仔細(xì)觀察天池:雪峰與杉林,白與黑相映,格外分明',
'雪山后涌起的白云給強(qiáng)烈陽(yáng)光照得白銀一樣刺眼。'
]
}, {
name: '秋天',
list: [
'秋姑娘又來(lái)到了果園里',
'果園里的果子成熟了,葡萄架上掛滿了一串串紫里透紅的大葡萄',
'它們相互掩映著自己的身體,太陽(yáng)出來(lái)了',
'照射在葡萄上就像一顆顆透明的紫色寶石',
'桔樹(shù)上,一個(gè)個(gè)金黃色的桔子,讓人看了忍不住想咬一口',
'假如你剝開(kāi)桔皮,你就可以看見(jiàn)一瓣瓣桔子就像一彎彎虧月時(shí)的月亮,晶瑩剔透。'
]
}, {
name: '早晨',
list: [
'清晨的江邊,沒(méi)有車水馬龍的喧囂',
'沒(méi)有人聲鼎沸的吵雜,也沒(méi)有讓人深感壓抑的匆匆人群',
'清晨的江邊,有的只是垂柳的迎風(fēng)飄拂',
'有的只是枝頭小鳥(niǎo)的婉轉(zhuǎn)歌唱',
'有的只是江風(fēng)中蘊(yùn)含著的淡淡的腥味',
'清晨的江邊,很靜',
'靜的可以撫平內(nèi)心的煩躁',
'清晨的江邊,很美,綠樹(shù)紅花、微風(fēng)拂面,不允許你攜帶任何憂傷。'
]
}, {
name: '欒樹(shù)',
list: [
'欒樹(shù) 十二月初,深圳,我在校園的青石板小路上撿到了欒樹(shù)的蒴果',
' 欒樹(shù)蒴果看上去有種似曾相識(shí)的漂亮--三瓣又薄又脆的果皮圍攏成三棱形',
'前端小心翼翼地開(kāi)著口。'
]
}, {
name: '荷塘',
list: [
'又是一年荷塘色 初夏早上六點(diǎn)',
'清亮透明的月兒還躲藏在云朵里,不忍離去',
'校園內(nèi)行人稀少,我騎著單車,晃晃悠悠的耷拉著星松的睡眼',
'校園內(nèi)景色如常,照樣是綠。'
]
}
]
export default linkageList;
總結(jié)
到此這篇關(guān)于微信小程序?qū)崿F(xiàn)導(dǎo)航欄和內(nèi)容上下聯(lián)動(dòng)功能的文章就介紹到這了,更多相關(guān)微信小程序?qū)Ш綑诤蛢?nèi)容上下聯(lián)動(dòng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- 詳解微信小程序膠囊按鈕返回|首頁(yè)自定義導(dǎo)航欄功能
- 微信小程序?qū)Ш綑诟S滑動(dòng)效果的實(shí)現(xiàn)代碼
- 微信小程序自定義導(dǎo)航欄實(shí)例代碼
- 微信小程序頂部導(dǎo)航欄滑動(dòng)tab效果
- 微信小程序教程系列之設(shè)置標(biāo)題欄和導(dǎo)航欄(7)
- 微信小程序 開(kāi)發(fā)之頂部導(dǎo)航欄實(shí)例代碼
- 微信小程序?qū)崿F(xiàn)的picker多級(jí)聯(lián)動(dòng)功能示例
- 微信小程序?qū)崿F(xiàn)左右列表聯(lián)動(dòng)
- 微信小程序 使用picker封裝省市區(qū)三級(jí)聯(lián)動(dòng)實(shí)例代碼
相關(guān)文章
js實(shí)現(xiàn)帶翻轉(zhuǎn)動(dòng)畫(huà)圖片時(shí)鐘
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)帶翻轉(zhuǎn)動(dòng)畫(huà)的圖片時(shí)鐘,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04
微信小程序使用toast消息對(duì)話框提示用戶忘記輸入用戶名或密碼功能【附源碼下載】
這篇文章主要介紹了微信小程序使用toast消息對(duì)話框提示用戶忘記輸入用戶名或密碼功能,結(jié)合實(shí)例形式詳細(xì)分析了toast組件實(shí)現(xiàn)消息提示功能的相關(guān)操作技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下2017-12-12
location.href 在IE6中不跳轉(zhuǎn)的解決方法與推薦使用代碼
在js中,我們經(jīng)常使用location.href來(lái)實(shí)現(xiàn)頁(yè)面的跳轉(zhuǎn),為了方便我們寫(xiě)成函數(shù)。下面就分別說(shuō)明下,下面的一些代碼的實(shí)現(xiàn)問(wèn)題。2010-07-07
php利用curl獲取遠(yuǎn)程圖片實(shí)現(xiàn)方法
這篇文章主要介紹了php利用curl獲取遠(yuǎn)程圖片實(shí)現(xiàn)方法,curl要求php環(huán)境支持,需要的朋友可以參考下2015-10-10
JavaScript實(shí)現(xiàn)計(jì)算器的四則運(yùn)算功能
這篇文章主要為大家介紹了如何通過(guò)JavaScript實(shí)現(xiàn)計(jì)算器的四則運(yùn)算功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起動(dòng)手試試2022-02-02
JavaScript實(shí)現(xiàn)時(shí)鐘特效
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)時(shí)鐘特效,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-06-06
基于input框覆蓋掉數(shù)字英文的實(shí)例講解
下面小編就為大家?guī)?lái)一篇基于input框覆蓋掉數(shù)字英文的實(shí)例講解。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
微信小程序云開(kāi)發(fā)(數(shù)據(jù)庫(kù))詳解
使用云開(kāi)發(fā)開(kāi)發(fā)微信小程序、小游戲,無(wú)需搭建服務(wù)器,這篇文章主要為大家詳細(xì)介紹了微信小程序云開(kāi)發(fā)數(shù)據(jù)庫(kù),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-05-05
一個(gè)多瀏覽器支持的背景變暗的div并可拖動(dòng)提示窗口功能的代碼
兼容IE、Firefox、Opera前幾天在網(wǎng)上找了許多資料,看了不少兄弟的源碼,一直找不到合適的,要不就是拖動(dòng)有問(wèn)題,要不就是不兼容Firefox,所以自已寫(xiě)了一個(gè),下面是代碼:2008-04-04

