时间:2021-05-18
项目需要,做一个和今日头条一样的导航栏,可以横行滚动,幸好再weui里面看到了类似的例子
地址:https://weui.shanliwawa.top/demo/js4.html,使用iscroll-lite.j实现,weui自己封装了一层,vue中实现代码:
<div id="tab-tip" class="container"> <div id="tagnav" class="weui-navigator weui-navigator-wrapper" style="touch-action: none;padding-left:5px"> <ul class="weui-navigator-list first_nav"> <li class v-for="group in groupList"> <a href="javascript:;" rel="external nofollow" :groupId="group.id" @click="loadData(group.id)">{{group.name}}</a> </li> </ul> </div> </div> 初始化: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,导致滑动敏感触发});以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
简介看到今日头条小程序页面可以滑动切换,而且tab导航条也会跟着滚动,点击tab导航,页面滑动,切导航栏也会跟着滚动,就想着要怎么实现这个功能像商城类商品类目如
近日,今日头条App重磅更新,底部导航栏的中心位置出现核心功能“常用”。进入“常用”出现头条小程序桌面和用户的常用功能。页面可以上拉,形成全屏页面。这与前不久微
11月17日,今日头条小程序正式上线,这是又一个备受开发者关注的小程序平台。从微信、支付宝、百度、今日头条、QQ、抖音相继推出的小程序平台,再到由10个手机厂商
近日,继微信、支付宝、百度之后,又一行业巨头推出小程序应用程序。坐拥2.4亿日活用户的今日头条于9月18日宣布正式发布小程序。据今日头条官方回应称,此番推出小程
微信小程序tabBar底部导航中文注解api,信小程序tabBar就是app底部的那个导航栏,可以放1-5导航链接,这里对微信小程序底部导航tabbar的中文解