欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序?qū)崿F(xiàn)導(dǎo)航欄和內(nèi)容上下聯(lián)動(dòng)功能代碼

 更新時(shí)間:2020年06月29日 14:48:36   作者:紫菀檀ss  
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)導(dǎo)航欄和內(nèi)容上下聯(lián)動(dòng)功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

  今日給大家分享一下如何實(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ò) swipercurrent 屬性和導(dǎo)航欄的 index 相互對(duì)應(yīng)來(lái)實(shí)現(xiàn)導(dǎo)航欄部分切換時(shí)內(nèi)容部分跟隨切換;通過(guò) swiperbindchange 事件拿到當(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)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評(píng)論