网创优客建站品牌官网
为成都网站建设公司企业提供高品质网站建设
热线:028-86922220
成都专业网站建设公司

定制建站费用3500元

符合中小企业对网站设计、功能常规化式的企业展示型网站建设

成都品牌网站建设

品牌网站建设费用6000元

本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...

成都商城网站建设

商城网站建设费用8000元

商城网站建设因基本功能的需求不同费用上面也有很大的差别...

成都微信网站建设

手机微信网站建站3000元

手机微信网站开发、微信官网、微信商城网站...

建站知识

当前位置:首页 > 建站知识

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

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

创新互联是一家集网站建设,汉川企业网站建设,汉川品牌网站建设,网站定制,汉川网站建设报价,网络营销,网络优化,汉川网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。

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

一、效果图:

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

二、实现过程:

   主要是使用 scroll-view 实现导航栏部分,用 swiper 实现下面的内容部分,通过 swipercurrent 属性和导航栏的 index 相互对应来实现导航栏部分切换时内容部分跟随切换;通过 swiperbindchange 事件拿到当前轮播的索引,对应赋值实现导航栏随着内容切换的效果。

这里有几点是有必要注意一下的:

  • scroll-view 标签必须加上行内样式 overflow:hidden;white-space:nowrap; 否则无法实现滑动效果;
  • scroll-view 包裹的要滑动的盒子元素要让它们变成行内块级元素(display:inline-block;)进行横向排列;
  • scroll-view 包裹的需要滑动的盒子元素使用 display:flex; 是不起作用(无效)的;
  • scroll-view 包裹的需要滑动的盒子元素不能使用浮动。

三、相关代码如下:

(一)wxml


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

网站标题:微信小程序实现导航栏和内容上下联动功能的方法-创新互联
当前URL:http://bjjierui.cn/article/cejsos.html

其他资讯