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

创新互联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}}

标题名称：微信小程序实现导航栏和内容上下联动功能的方法-创新互联
新闻来源：http://kswjz.com/article/cejsos.html

扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流

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

扫二维码与项目经理沟通

其他资讯

行业动态

企业网站建设的重要性！

服务项目

网站建设

移动端/APP