<span id="mktg5"></span>

<i id="mktg5"><meter id="mktg5"></meter></i>

        <label id="mktg5"><meter id="mktg5"></meter></label>
        最新文章專題視頻專題問答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
        主站蜘蛛池模板: 男女拍拍拍免费视频网站| 亚洲国产亚洲片在线观看播放| 亚洲视频精品在线| 99re6在线精品免费观看| 亚洲av无码天堂一区二区三区| 亚洲一区二区三区不卡在线播放| 中文字幕成人免费视频| 中文字幕亚洲第一在线| 日韩免费精品视频| 国产亚洲玖玖玖在线观看| 四虎成人免费网站在线| 国产精品亚洲一区二区三区久久 | 亚洲一区二区精品视频| 无遮挡a级毛片免费看| 亚洲日韩小电影在线观看| 国内精品免费在线观看| 亚洲欧洲精品在线| 99视频在线精品免费观看6| 久久精品国产亚洲AV天海翼 | 97视频免费观看2区| 亚洲一区二区三区播放在线| 扒开双腿猛进入爽爽免费视频 | 亚洲一区二区三区电影| 国产成人无码免费看视频软件| 精品亚洲AV无码一区二区| 国产免费午夜a无码v视频| 一级做受视频免费是看美女 | 亚洲最新视频在线观看| 国内外成人免费视频| 一级毛片人与动免费观看| 亚洲国产精品久久久久久| 成年18网站免费视频网站| 一级毛片正片免费视频手机看| 亚洲人成电影网站国产精品| 麻豆高清免费国产一区| 美女黄频视频大全免费的| 亚洲网址在线观看你懂的| 国产免费人成视频在线观看| 波多野结衣免费一区视频| 亚洲av午夜电影在线观看| 亚洲国产AV无码专区亚洲AV|