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

定制建站费用3500元

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

成都品牌网站建设

品牌网站建设费用6000元

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

成都商城网站建设

商城网站建设费用8000元

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

成都微信网站建设

手机微信网站建站3000元

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

建站知识

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

小程序开发中如何实现一个点击导航条跳转页面功能-创新互联

小程序开发中如何实现一个点击导航条跳转页面功能?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。

成都创新互联是专业的昆都仑网站建设公司,昆都仑接单;提供网站设计、成都做网站,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行昆都仑网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

具体内容如下

黄色部分是不可以滑动的,蓝色部分可以滑动。

小程序开发中如何实现一个点击导航条跳转页面功能

代码解说:

  • 首先我在js自定义了navState参数用于判断导航的当前状态,
  • 定义了data-index用于js中动态修改导航的当前状态,
  • nav-switch-style为选择导航条时的样式,
  • 不可滑动视图切换很简单,用wx:if判断状态显示相应页就好了,
  • 滑动页视图切换要用到swiper和 swiper-item,
  • 用bindchang方法监听滑块,current 改变时会触发 change 事件(还有个bindanimationfinish方法监听也是可以用的,详细请看官方文档)
  • 动态的绑定了current滑块的index,这样就可以实现点击导航条滑块跟着滚动,
  • 相反的,当滑动滑块时,就可以根据current的值来动态修改导航的状态了。

wxml代码:



 页面一
 页面二
 页面三



 1
 2
 3



 
 
 
 左右可滑动1
 
 
 
 
 左右可滑动2
 
 
 
 
 左右可滑动3
 
 
 

分享标题:小程序开发中如何实现一个点击导航条跳转页面功能-创新互联
网页路径:http://bjjierui.cn/article/doosee.html

其他资讯