从品牌网站建设到网络营销策划,从策略到执行的一站式服务
本篇内容介绍了“微信小程序怎么实现今日头条导航栏滚动效果”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
vue中实现代码:
初始化: mounted() { setTimeout(function() { TagNav("#tagnav", { type: "scrollToNext", curClassName: "weui-state-active", index: 0 }); $(".first_nav") .children(":first") .find("a") .addClass("first_border_circle"); $(".first_nav") .children(":last") .find("a") .addClass("end_border_circle"); }, 0); },
注意:引入weui的css,class="container"这个一定要有,不然出现定位出现问题。
setimeout等元素渲染完成再初始化。
当然做这个项目的时候出现了一个问题,安卓手机第一次进入页面,非导航栏滑动的时候敏感,导致本来是滑动,触发了click事件,导致跳转
通过查找了许多资料,因为iscroll-lite默认事件touchend等绑定再window上,不是绑定再我们滚动的元素(上面例子:id="tagnav"的div),导致
点击其他的区域触发了click事件,幸好看到它有配置项:bindToWrapper,把这个值设定为true解决
因为weui重新封装了,所以找到,添加:bindToWrapper: true即可解决
self.iScroll = new IScroll(self.el, { scrollX: true, scrollY: false, click: true, bindToWrapper: true//防止touchend等事件绑定到window,导致滑动敏感触发 });
“微信小程序怎么实现今日头条导航栏滚动效果”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站,小编将为大家输出更多高质量的实用文章!
成都网站建设公司地址:成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220
成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.
专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网! | 成都网站建设哪家好? | 网站建设地图