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


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 each函数的链式调用
Jul 22 Javascript
JS 面向对象之神奇的prototype
Feb 26 Javascript
AngularJS中的缓存使用
Jan 11 Javascript
javascript操作cookie
Jan 17 Javascript
jQuery实现的分页功能示例
Jan 22 Javascript
angular-cli修改端口号【angular2】
Apr 19 Javascript
jquery实现左右轮播图效果
Sep 28 jQuery
详细分析jsonp的原理和实现方式
Nov 20 Javascript
微信小程序实现action-sheet弹出底部菜单功能【附源码下载】
Dec 09 Javascript
vue封装可复用组件confirm,并绑定在vue原型上的示例
Oct 31 Javascript
详解vue 组件
Jun 11 Javascript
js实现贪吃蛇小游戏(加墙)
Jul 31 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
一个更简单的无限级分类菜单代码
2007/01/16 PHP
python进程与线程小结实例分析
2018/11/11 PHP
PHP7创建COOKIE和销毁COOKIE的实例方法
2020/02/03 PHP
JS OOP包机制,类创建的方法定义
2009/11/02 Javascript
jQuery checkbox全选/取消全选实现代码
2009/11/14 Javascript
JavaScript isPrototypeOf和hasOwnProperty使用区别
2010/03/04 Javascript
js时间戳格式化成日期格式的多种方法
2013/11/11 Javascript
Jquery Post处理后不进入回调的原因及解决方法
2014/07/15 Javascript
Egret引擎开发指南之编译项目
2014/09/03 Javascript
IE下通过a实现location.href 获取referer的值
2014/09/04 Javascript
node.js中的定时器nextTick()和setImmediate()区别分析
2014/11/26 Javascript
延时加载JavaScript代码提高速度
2015/12/27 Javascript
解决js函数闭包内存泄露问题的办法
2016/01/25 Javascript
浅谈Angular中ngModel的$render
2016/10/24 Javascript
vue首次赋值不触发watch的解决方法
2018/09/11 Javascript
Python使用内置json模块解析json格式数据的方法
2017/07/20 Python
使用Python爬了4400条淘宝商品数据,竟发现了这些“潜规则”
2018/03/23 Python
python字典快速保存于读取的方法
2018/03/23 Python
Python 分享10个PyCharm技巧
2019/07/13 Python
django 微信网页授权认证api的步骤详解
2019/07/30 Python
Python配置pip国内镜像源的实现
2020/08/20 Python
css背景图片的背景裁切、背景透明度、背景变换等效果运用
2012/12/24 HTML / CSS
CSS3 :nth-child()伪类选择器实现奇偶行显示不同样式
2013/11/05 HTML / CSS
详解CSS3 rem(设置字体大小) 教程
2017/11/21 HTML / CSS
css3实现元素环绕中心点布局的方法示例
2019/01/15 HTML / CSS
大韩航空官方网站:Korean Air
2017/10/25 全球购物
Amcal中文官网:澳洲综合性连锁药房
2019/03/28 全球购物
Pharmacy Online中文直邮网站:澳洲大型药房
2020/06/27 全球购物
Java里面如何把一个Array数组转换成Collection, List
2013/07/26 面试题
TCP/IP模型的分界线
2012/12/01 面试题
技校毕业生自荐信
2014/06/03 职场文书
艾滋病宣传标语
2014/06/25 职场文书
2015年感恩母亲节活动方案
2015/05/04 职场文书
大学运动会通讯稿
2015/07/18 职场文书
叶县这家生产军用电台的兵工厂,人称“四机部”,走出一上将
2022/02/18 无线电
「魔导具师妲莉亚永不妥协~从今天开始的自由职人生活~」1、2卷发售宣传CM公开
2022/03/21 日漫