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


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 相关文章推荐
newxtree.js代码
Mar 13 Javascript
打造基于jQuery的高性能TreeView(asp.net)
Feb 23 Javascript
JQuery获取与设置HTML元素的内容或文本的实现代码
Jun 20 Javascript
轻松掌握JavaScript装饰者模式
Aug 27 Javascript
jQuery实现6位数字密码输入框
Dec 29 Javascript
vue-resource 拦截器使用详解
Feb 21 Javascript
JS实现浏览器打印、打印预览示例
Feb 28 Javascript
React Native悬浮按钮组件的示例代码
Apr 05 Javascript
微信小程序通过保存图片分享到朋友圈功能
May 24 Javascript
JS获取今天是本月第几周、本月共几周、本月有多少天、是今年的第几周、是今年的第几天的示例代码
Dec 05 Javascript
微信小程序npm引入vant-weapp的踩坑记录
Aug 01 Javascript
微信小程序 textarea 层级过高问题简单解决方案
Oct 14 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中大括号作用介绍
2012/03/22 PHP
PHP使用xpath解析XML的方法详解
2017/05/20 PHP
Thinkphp开发--集成极光推送
2017/09/15 PHP
Yii2 queue的队列使用详解
2019/07/19 PHP
Thinkphp5.0框架视图view的循环标签用法示例
2019/10/12 PHP
yii2.0框架实现上传excel文件后导入到数据库的方法示例
2020/04/13 PHP
学习ExtJS(二) Button常用方法
2009/10/07 Javascript
小议javascript 设计模式 推荐
2009/10/28 Javascript
jQuery实现文件上传进度条特效
2015/08/12 Javascript
JS实现网页游戏中滑块响应鼠标点击移动效果
2015/10/19 Javascript
浅谈angular4 ng-content 中隐藏的内容
2017/08/18 Javascript
基于vue.js快速搭建图书管理平台
2017/10/29 Javascript
bootstrap-table formatter 使用vue组件的方法
2019/05/09 Javascript
解决layui追加或者动态修改的表单元素“没效果”的问题
2019/09/18 Javascript
vue中动态select的使用方法示例
2019/10/28 Javascript
JavaScript实现PC端横向轮播图
2020/02/07 Javascript
Openlayers实现图形绘制
2020/09/28 Javascript
JavaScript代码实现简单计算器
2020/12/27 Javascript
在Python的Flask框架下收发电子邮件的教程
2015/04/21 Python
完美解决Python2操作中文名文件乱码的问题
2017/01/04 Python
Python+OpenCV让电脑帮你玩微信跳一跳
2018/01/04 Python
Django admin model 汉化显示文字的实现方法
2019/08/12 Python
Python Web框架之Django框架cookie和session用法分析
2019/08/16 Python
Python常见反爬虫机制解决方案
2020/06/01 Python
详解用Python调用百度地图正/逆地理编码API
2020/07/02 Python
详解pandas apply 并行处理的几种方法
2021/02/24 Python
jurlique茱莉蔻英国官网:澳洲天然护肤品
2018/08/03 全球购物
Yves Rocher伊夫·黎雪美国官网:法国始创植物美肌1959
2019/01/09 全球购物
学校卫生检查制度
2014/02/03 职场文书
cf战队收人口号
2014/06/21 职场文书
领导干部四风问题自我剖析材料
2014/09/25 职场文书
公安局副政委班子个人对照检查材料
2014/10/04 职场文书
2014年反洗钱工作总结
2014/11/22 职场文书
年终工作总结范文2014
2014/11/27 职场文书
周恩来的四个昼夜观后感
2015/06/03 职场文书
HTML5页面音频自动播放的实现方式
2021/06/21 HTML / CSS