国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當前位置: 首頁 - 科技 - 知識百科 - 正文

微信小程序仿今日頭條導航欄滾動解析

來源:懂視網 責編:小采 時間:2020-11-27 21:52:12
文檔

微信小程序仿今日頭條導航欄滾動解析

微信小程序仿今日頭條導航欄滾動解析:項目需要,做一個和今日頭條一樣的導航欄,可以橫行滾動,幸好再weui里面看到了類似的例子 地址:https://weui.shanliwawa.top/demo/js4.html,使用iscroll-lite.j實現,weui自己封裝了一層,vue中實現代碼: <div id=tab-tip
推薦度:
導讀微信小程序仿今日頭條導航欄滾動解析:項目需要,做一個和今日頭條一樣的導航欄,可以橫行滾動,幸好再weui里面看到了類似的例子 地址:https://weui.shanliwawa.top/demo/js4.html,使用iscroll-lite.j實現,weui自己封裝了一層,vue中實現代碼: <div id=tab-tip

項目需要,做一個和今日頭條一樣的導航欄,可以橫行滾動,幸好再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,導致滑動敏感觸發
});

聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文檔

微信小程序仿今日頭條導航欄滾動解析

微信小程序仿今日頭條導航欄滾動解析:項目需要,做一個和今日頭條一樣的導航欄,可以橫行滾動,幸好再weui里面看到了類似的例子 地址:https://weui.shanliwawa.top/demo/js4.html,使用iscroll-lite.j實現,weui自己封裝了一層,vue中實現代碼: <div id=tab-tip
推薦度:
  • 熱門焦點

最新推薦

猜你喜歡

熱門推薦

專題
Top
主站蜘蛛池模板: 免费亚洲网站 | 国产精品久久久久久久久久久久 | 国产成人99久久亚洲综合精品 | 99久久国产亚洲综合精品 | 一区二区手机视频 | 一级黄网站 | 欧美日韩国内 | 国产欧美二区 | 国产全黄a一级毛片视频 | 国产高清在线看 | 国产一区二区日韩欧美在线 | 99久久综合| 欧美日韩欧美日韩 | 国产伦精品一区二区三区免费下载 | 亚洲精品视频区 | 尤物视频黄| 在线亚洲一区 | 99热成人精品免费久久 | 永久免费观看的毛片的网站 | 久久精品国产一区 | 日韩精品一区二区三区国语自制 | 日韩高清欧美 | 香港经典a毛片免费观看…伊人色综合久久 | 国产精品视频一区二区三区不卡 | 久久久久国产一级毛片高清版 | 一级毛片私人影院免费 | 国产欧美一区二区精品久久久 | 在线 v亚洲 v欧美v 专区 | 国产免费一区二区三区香蕉精 | 欧美一级在线 | 国产日韩欧美精品在线 | 五十路夫妻 | 国产精品毛片久久久久久久 | 日本一区二区三区在线播放 | 久久成人a毛片免费观看网站 | 国产欧美二区 | 亚洲国产福利 | 国产一区二区三区高清 | 伊人网伊人影院 | 国产美女视频黄a视频全免费网站 | 精品一区二区三区3d动漫 |