微信小程序仿今日头条导航栏滚动解析
作者:IT-HourseMan 时间:2024-04-29 13:55:42
项目需要,做一个和今日头条一样的导航栏,可以横行滚动,幸好再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,导致滑动敏感触发
});
来源:https://www.cnblogs.com/dehuachenyunfei/p/wechat_nav_iscroll.html
标签:微信,小程序,今日头条,导航栏,滚动
0
投稿
猜你喜欢
php设置允许大文件上传示例代码
2024-05-09 14:47:46
Django前后端分离csrf token获取方式
2021-03-15 04:23:43
vue中Axios添加拦截器刷新token的实现方法
2024-05-13 09:07:41
黑客谈 MSSQL SA权限入侵的感悟
2008-03-20 10:18:00
python实现的简单FTP上传下载文件实例
2022-12-29 13:17:42
11个Python3字典内置方法大全与示例汇总
2021-11-26 22:33:51
PHP实现上传文件并存进数据库的方法
2023-07-03 21:35:14
python实现3D地图可视化
2023-08-27 10:24:50
python去掉行尾的换行符方法
2021-10-24 02:36:22
Python中列表的基本操作汇总
2021-08-20 23:21:27
Python matplotlib模块及柱状图用法解析
2023-11-24 01:04:33
解析SQL Server中数据库快照的工作原理
2009-02-19 17:04:00
瞬间的设计 I
2009-12-25 18:54:00
如何把中文转换为UNICODE?
2009-11-07 18:39:00
深入浅析python定时杀进程
2021-10-23 17:14:15
python虚拟环境virtualenv的使用教程
2021-03-08 00:50:17
刷新页面的几种方法小结(JS,ASP.NET)
2024-05-28 15:37:33
python实现的用于搜索文件并进行内容替换的类实例
2022-01-07 13:50:43
Centos6.5在线安装mysql 8.0详细教程
2024-01-15 01:02:57
Windows下Anaconda下载安装与配置教程分享
2023-09-29 22:37:11