广告位联系
返回顶部
分享到

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

微信小程序 来源:互联网搜集 作者:秩名 发布时间:2019-08-20 21:15:43 人浏览
摘要

地址: 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:

地址:https://weui.shanliwawa.top/demo/js4.html-[-/a>,使用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,导致滑动敏感触发
});
 


版权声明 : 本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权, 违法违规的内容, 请发送邮件至2530232025#qq.cn(#换@)举报,一经查实,本站将立刻删除。
原文链接 : https://www.cnblogs.com/dehuachenyunfei/p/wechat_nav_iscroll.html
相关文章
  • 本站所有内容来源于互联网或用户自行发布,本站仅提供信息存储空间服务,不拥有版权,不承担法律责任。如有侵犯您的权益,请您联系站长处理!
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计