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


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 相关文章推荐
js 浮动层菜单收藏
Jan 16 Javascript
推荐40个简单的 jQuery 导航插件和教程(下篇)
Sep 14 Javascript
Extjs4 Treegrid 使用心得分享(经验篇)
Jul 01 Javascript
JS判断变量是否为空判断是否null
Jul 25 Javascript
jQuery中复合属性选择器用法实例
Dec 31 Javascript
jQuery菜单插件用法实例
Jul 25 Javascript
jQuery基本选择器之标签名选择器
Sep 03 Javascript
详解从angular-cli:1.0.0-beta.28.3升级到@angular/cli:1.0.0
May 22 Javascript
说说AngularJS中的$parse和$eval的用法
Sep 14 Javascript
vue项目中添加单元测试的方法
Jul 21 Javascript
详解基于Vue,Nginx的前后端不分离部署教程
Dec 04 Javascript
详解项目升级到vue-cli3的正确姿势
Jan 28 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
PHP5.3安装Zend Guard Loader图文教程
2014/09/29 PHP
在Windows XP下安装Apache+MySQL+PHP环境
2015/02/22 PHP
使用php的HTTP请求的库Requests实现美女图片墙
2015/02/22 PHP
菜鸟javascript基础资料整理2
2010/12/06 Javascript
Extjs NumberField后面加单位实现思路
2013/07/30 Javascript
返回页面顶部top按钮通过锚点实现(自写)
2013/08/30 Javascript
javascript实现简单的分页特效
2015/08/12 Javascript
JavaScript lodash常见用法系列小结
2016/08/24 Javascript
JavaScript实现通过select标签跳转网页的方法
2016/09/29 Javascript
AngularJS实现的select二级联动下拉菜单功能示例
2017/10/25 Javascript
详解vue mixins和extends的巧妙用法
2017/12/20 Javascript
axios全局请求参数设置,请求及返回拦截器的方法
2018/03/05 Javascript
vue与vue-i18n结合实现后台数据的多语言切换方法
2018/03/08 Javascript
axios的拦截请求与响应方法
2018/08/11 Javascript
JS实现随机生成10个手机号的方法示例
2018/12/07 Javascript
详解搭建一个vue-cli的移动端H5开发模板
2020/01/17 Javascript
Python lambda和Python def区别分析
2014/11/30 Python
Python中的装饰器用法详解
2015/01/14 Python
python编程实现12306的一个小爬虫实例
2017/12/27 Python
python数据封装json格式数据
2018/03/04 Python
python numpy格式化打印的实例
2018/05/14 Python
python切片及sys.argv[]用法详解
2018/05/25 Python
Django基础知识与基本应用入门教程
2018/07/20 Python
解决pycharm每次新建项目都要重新安装一些第三方库的问题
2019/01/17 Python
11个Python Pandas小技巧让你的工作更高效(附代码实例)
2019/04/30 Python
python字典改变value值方法总结
2019/06/21 Python
Python实现socket非阻塞通讯功能示例
2019/11/06 Python
python encrypt 实现AES加密的实例详解
2020/02/20 Python
2019年c语言经典面试题目
2016/08/17 面试题
Java面试题汇总
2015/12/06 面试题
优秀的2014年两会精神解读
2014/03/17 职场文书
工程质量承诺书范文
2014/03/27 职场文书
计算机应用专业自荐信
2014/07/05 职场文书
关于运动会的广播稿(10篇)
2014/09/12 职场文书
讲文明倡议书
2015/04/29 职场文书
聊一聊Redis与MySQL双写一致性如何保证
2021/06/26 Redis