創新互聯www.cdcxhl.cn八線動態BGP香港云服務器提供商，新人活動買多久送多久，劃算不套路！

創新互聯是一家集網站建設,漢川企業網站建設,漢川品牌網站建設,網站定制,漢川網站建設報價,網絡營銷,網絡優化,漢川網站推廣為一體的創新建站企業，幫助傳統企業提升企業形象加強企業競爭力?？沙浞譂M足這一群體相比中小企業更為豐富、高端、多元的互聯網需求。同時我們時刻保持專業、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學習、思考、沉淀、凈化自己，讓我們為更多的企業打造出實用型網站。

這篇文章將為大家詳細講解有關微信小程序實現導航欄和內容上下聯動功能的方法，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

一、效果圖：

二、實現過程：

   主要是使用 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" >
		<view class="top-item {{curIndex===index&#63;'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>

標題名稱：微信小程序實現導航欄和內容上下聯動功能的方法-創新互聯
文章鏈接：http://www.yijiale78.com/article3/cejsos.html

成都網站建設公司_創新互聯，為您提供外貿建站、標簽優化、自適應網站、網站維護、網站收錄、品牌網站設計

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯