微信小程序实现导航栏和内容上下联动功能的方法-创新互联

创新互联www.cdcxhl.cn八线动态BGP香港云服务器提供商，新人活动买多久送多久，划算不套路！

这篇文章将为大家详细讲解有关微信小程序实现导航栏和内容上下联动功能的方法，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

一、效果图：

二、实现过程：

   主要是使用 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

	
		{{item.name}}
	
	
		{{item.list}}