微信小程序仿今日头条导航栏滚动解析


Posted in Javascript onAugust 20, 2019

项目需要,做一个和今日头条一样的导航栏,可以横行滚动,幸好再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,导致滑动敏感触发
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery Tips(2) 关于$()包装集你不知道的
Dec 14 Javascript
jquery 扑捉回车键事件代码
Apr 24 Javascript
Node调试工具JSHint的安装及配置教程
May 27 Javascript
jquery实现通用的内容渐显Tab选项卡效果
Sep 07 Javascript
JavaScript实现图片滑动切换的代码示例分享
Mar 06 Javascript
微信小程序 保留小数(toFixed)详细介绍
Nov 16 Javascript
Vue实例中生命周期created和mounted的区别详解
Aug 25 Javascript
使用vue-cli+webpack搭建vue开发环境的方法
Dec 22 Javascript
浅谈Vue SSR中的Bundle的具有使用
Nov 21 Javascript
JavaScript实现放大镜效果代码示例
Apr 29 Javascript
Paypal支付不完全指北
Jun 04 Javascript
vue+ElementUI 关闭对话框清空验证,清除form表单的操作
Aug 06 Javascript
Vue中axios的封装(报错、鉴权、跳转、拦截、提示)
Aug 20 #Javascript
Vue formData实现图片上传
Aug 20 #Javascript
Angular8 Http拦截器简单使用教程
Aug 20 #Javascript
vue实现axios图片上传功能
Aug 20 #Javascript
扫微信小程序码实现网站登陆实现解析
Aug 20 #Javascript
vue+element-ui+axios实现图片上传
Aug 20 #Javascript
vue element upload实现图片本地预览
Aug 20 #Javascript
You might like
PHP采集类snoopy详细介绍(snoopy使用教程)
2014/06/19 PHP
使用Thinkphp框架开发移动端接口
2015/08/05 PHP
php支付宝在线支付接口开发教程
2016/09/19 PHP
浅析PHP数据导出知识点
2018/02/17 PHP
thinkPHP利用ajax异步上传图片并显示、删除的示例
2018/09/26 PHP
wordpress自定义标签云与随机获取标签的方法详解
2019/03/22 PHP
PHP中类与对象功能、用法实例解读
2020/03/27 PHP
thinkphp框架表单数组实现图片批量上传功能示例
2020/04/04 PHP
JavaScript高级程序设计
2006/12/29 Javascript
JavaScript是否可实现多线程  深入理解JavaScript定时机制
2009/12/22 Javascript
Javascript 键盘keyCode键码值表
2009/12/24 Javascript
Jquery判断$(&quot;#id&quot;)获取的对象是否存在的方法
2013/09/25 Javascript
js实现绿白相间竖向网页百叶窗动画切换效果
2015/03/02 Javascript
Javascript实现的Map集合工具类完整实例
2015/07/31 Javascript
jQuery仿360导航页图标拖动排序效果代码分享
2015/08/24 Javascript
jQuery实现带渐显效果的人物多级关系图代码
2015/10/16 Javascript
jquery获取css的color值返回RGB的方法
2015/12/18 Javascript
nodejs利用http模块实现银行卡所属银行查询和骚扰电话验证示例
2016/12/30 NodeJs
jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例
2017/02/14 Javascript
使用rollup打包JS的方法步骤
2018/12/05 Javascript
react用Redux中央仓库实现一个todolist
2019/09/29 Javascript
使用Vue+Django+Ant Design做一个留言评论模块的示例代码
2020/06/01 Javascript
[56:41]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Newbee vs OG
2018/04/01 DOTA
python3 面向对象__类的内置属性与方法的实例代码
2018/11/09 Python
Django 大文件下载实现过程解析
2019/08/01 Python
python实现差分隐私Laplace机制详解
2019/11/25 Python
Python Json数据文件操作原理解析
2020/05/09 Python
美国非常受欢迎的Spa品牌:Bliss必列斯
2018/04/10 全球购物
澳大利亚100%丝绸多彩度假装商店:TheSwankStore
2019/09/04 全球购物
如何利用cmp命令比较文件
2016/04/11 面试题
有限责任公司股东合作协议书范本
2014/10/30 职场文书
2014年驾驶员工作总结
2014/11/18 职场文书
教师听课评语大全
2014/12/31 职场文书
中秋客户感谢信
2015/01/22 职场文书
2016幼儿园教师节新闻稿
2015/11/25 职场文书
python基于OpenCV模板匹配识别图片中的数字
2021/03/31 Python