顶部选项卡-可左右拖动(webview)示例如何做到tab与webview联动滚动

概述顶部选项卡-可左右拖动(webview)的示例中，如何做到tab与webview联动滚动，效果类似uc头条一样 ps：自己也不确定有多少了到航头，页面怎么办，到航头从后台获取，页面不可能建N多个.html   <header class="mui-bar mui-bar-nav"> <!--<a class="mui-action-back mui-icon mui-

顶部选项卡-可左右拖动(webvIEw)的示例中，如何做到tab与webvIEw联动滚动，效果类似uc头条一样

ps：自己也不确定有多少了到航头，页面怎么办，到航头从后台获取，页面不可能建N多个.HTML

 

<header class="mui-bar mui-bar-nav">              <!--<a ></a>-->              <h1 class="mui-Title">选项卡练习(webvIEw)</h1>          </header>          <div class="mui-content">              <!--描述：slIDer-->              <div ID="slIDer" class="mui-slIDer mui-fullscreen">                  <div ID="slIDerSegmentedControl" class="mui-scroll-wrapper mui-slIDer-indicator mui-segmented-control mui-segmented-control-inverted">                      <div class="mui-scroll">                          <a class="mui-control-item mui-active" href="#item1mobile" data-wID="tab-1.HTML">                              推荐                          </a>                          <a class="mui-control-item" href="#item2mobile" data-wID="tab-2.HTML">                              视频                          </a>                          <a class="mui-control-item" href="#item3mobile" data-wID="tab-3.HTML">                              健康                          </a>                          <a class="mui-control-item" href="#item4mobile" data-wID="tab-4.HTML">                              社会                          </a>                          <a class="mui-control-item" href="#item5mobile" data-wID="tab-5.HTML">                              娱乐                          </a>                          <a class="mui-control-item" href="#item6mobile" data-wID="tab-6.HTML">                              军事                          </a>                          <a class="mui-control-item" href="#item7mobile" data-wID="tab-7.HTML">                              数码                          </a>                      </div>                  </div>              </div>          </div>

mui.plusReady(function() {                  var items = [];                  for(var i = 1; i <= 7; i++) {                      items.push({                          ID: ‘‘ + i + ‘.HTML‘,url: ‘pages/‘ + i + ‘.HTML‘,extras: {}                      })                  }                  var currentID = plus.webvIEw.currentWebvIEw().ID;                  var group = new webvIEwGroup(currentID,{                      items: items,onChange: function(obj) {                          var c = document.querySelector(".mui-control-item.mui-active");                          if(c) {                              c.classList.remove("mui-active");                          }                          document.querySelector(".mui-scroll .mui-control-item:nth-child(" + (parseInt(obj.index) + 1) + ")").classList.add("mui-active");                      }                  });                  mui(".mui-scroll").on("tap",".mui-control-item",function(e) {                      var wID = this.getAttribute("data-wID");                      group.switchTab(wID);                  });              });

 

在滚动过程中，item数组里有三个参数

ID: "",
url: "",
extras: {}

第一个参数 ID 是我们主要用来切换的，获取到的 data-wID 与ID 对比并跳转 url   

 

mui webvIEw如何取消左右滑动切换页面

将源码包webvIEwGroup.Js中的‘moveMode‘:‘followFinger‘注掉或者删除即可。

大概在115行。

@H_676_404@ 总结

以上是内存溢出为你收集整理的顶部选项卡-可左右拖动(webview)示例如何做到tab与webview联动滚动全部内容，希望文章能够帮你解决顶部选项卡-可左右拖动(webview)示例如何做到tab与webview联动滚动所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。