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


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 相关文章推荐
javascript 异常处理使用总结
Jun 21 Javascript
原生js的弹出层且其内的窗口居中
May 14 Javascript
jquery实现用户打分评分特效
May 28 Javascript
JavaScript数组的定义及数字操作技巧
Jun 06 Javascript
javascript兼容性(实例讲解)
Aug 15 Javascript
Vux+Axios拦截器增加loading的问题及实现方法
Nov 08 Javascript
详解js静态检查工具eslint配置文件
Nov 23 Javascript
浅谈vue.use()方法从源码到使用
May 12 Javascript
2019年度web前端面试题总结(主要为Vue面试题)
Jan 12 Javascript
在vue中created、mounted等方法使用小结
Jul 21 Javascript
Vue用mixin合并重复代码的实现
Nov 27 Vue.js
vue3使用vue-count-to组件的实现
Dec 25 Vue.js
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与已存在的Java应用程序集成
2006/10/09 PHP
jQuery EasyUI API 中文文档 - DateBox日期框
2011/10/15 PHP
解析PHP中empty is_null和isset的测试
2013/06/29 PHP
10个php函数实用却不常见
2015/10/13 PHP
PHP中Http协议post请求参数
2015/11/02 PHP
PHP 开发者该知道的 5 个 Composer 小技巧
2016/02/03 PHP
PHP异常处理定义与使用方法分析
2017/07/25 PHP
Alliance vs Liquid BO3 第一场2.13
2021/03/10 DOTA
GreyBox技术总结(转)
2010/11/23 Javascript
增强用户体验友好性之jquery easyui window 窗口关闭时的提示
2012/06/22 Javascript
javascript中match函数的用法小结
2014/02/08 Javascript
easyUI实现类似搜索框关键词自动提示功能示例代码
2016/12/27 Javascript
jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
2017/03/21 jQuery
基于JavaScript实现幸运抽奖页面
2020/07/05 Javascript
JS实现匀速与减速缓慢运动的动画效果封装示例
2018/08/27 Javascript
基于jquery ajax的多文件上传进度条过程解析
2019/09/11 jQuery
JavaScript canvas绘制圆弧与圆形
2020/02/18 Javascript
jquery实现点击左右按钮切换图片
2021/01/27 jQuery
使用Python中PDB模块中的命令来调试Python代码的教程
2015/03/30 Python
python获取mp3文件信息的方法
2015/06/15 Python
pandas 取出表中一列数据所有的值并转换为array类型的方法
2018/04/11 Python
python 利用turtle模块画出没有角的方格
2019/11/23 Python
TensorFlow 多元函数的极值实例
2020/02/10 Python
python批量修改xml属性的实现方式
2020/03/05 Python
Python while true实现爬虫定时任务
2020/06/08 Python
python 获取字典键值对的实现
2020/11/12 Python
美国最大最全的亚洲购物网站:美国亚米网(Yamibuy)
2020/05/05 全球购物
什么是Remote Module
2016/06/10 面试题
怎样写好自荐信和推荐信
2013/12/26 职场文书
创业者是否需要商业计划书?
2014/02/07 职场文书
公务员转正考察材料
2014/02/07 职场文书
家长会主持词开场白
2014/03/18 职场文书
《三顾茅庐》教学反思
2014/04/10 职场文书
奥巴马竞选演讲稿
2014/05/15 职场文书
2014年数学教研组工作总结
2014/12/06 职场文书
python文本处理的方案(结巴分词并去除符号)
2021/05/26 Python