<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
        主站蜘蛛池模板: 国产精品xxxx国产喷水亚洲国产精品无码久久一区 | 久久久久亚洲av毛片大| 色婷婷亚洲一区二区三区| 成人毛片18女人毛片免费| 亚洲13又紧又嫩又水多| 两性刺激生活片免费视频| 久久久久se色偷偷亚洲精品av| 无码人妻一区二区三区免费手机| 亚洲欧洲日韩国产| 久久综合AV免费观看| 国产精品无码亚洲一区二区三区| 国产三级电影免费观看| 久青草国产免费观看| 亚洲欧洲国产精品香蕉网| 精品国产免费一区二区三区香蕉| 亚洲视频在线一区| 久久受www免费人成_看片中文| 2017亚洲男人天堂一| 国产大片91精品免费看3| 一级毛片aaaaaa视频免费看| 亚洲人成网77777色在线播放| 1a级毛片免费观看| 精品国产日韩久久亚洲| 国产成人免费片在线视频观看| 亚洲国产免费综合| 亚洲无成人网77777| 免费无码成人AV片在线在线播放| 性生大片视频免费观看一级| 亚洲av中文无码乱人伦在线r▽ | 成人免费av一区二区三区| 亚洲图片在线观看| 在线A级毛片无码免费真人| 一级黄色免费网站| 亚洲综合激情视频| 免费少妇a级毛片| 99精品视频在线视频免费观看 | 成人免费无毒在线观看网站| 日日躁狠狠躁狠狠爱免费视频| 久久亚洲精品中文字幕无码| 午夜无遮挡羞羞漫画免费| 99久久99这里只有免费的精品|