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

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

<header class="mui-bar mui-bar-nav">
<!--<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></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行。

顶部选项卡-可左右拖动(webview)示例如何做到tab与webview联动滚动的更多相关文章

  1. MUI顶部选项卡的用法(tab-top-webview-main)

      前  言           MUI是一款最接近原生APP体验的高性能前端框架,它的比较重要的功能是:下拉刷新.侧滑导航.滑动触发操作菜单和顶部(底部)选项卡等 最近用MUI做手机app应用的时候 ...

  2. 详解MUI顶部选项卡(tab-top-webview-main)的用法

    最近用MUI做手机app的时候,遇到了一点问题.然后就对这个tab-top-webview-main的源码做了点研究,接下来我将和大家详解一下 tab-top-webview-main的用法和应该注意 ...

  3. mui 顶部选项卡的两种切换方式

    mui 顶部选项卡的两种切换方式 第一种main页面 <!DOCTYPE html> <html> <head> <meta charset="ut ...

  4. mui 登录跳转到首页之后顶部选项卡不灵敏问题

    前段时间开发一个用mui开发app的时候遇到了登录跳转到首页之后顶部选项卡会失灵的问题,多次尝试之后终于解决了,趁现在还有点印象记录一下吧. 一开始我是用mui.openWindow来新开首页的,出了 ...

  5. TabTopLayout【自定义顶部选项卡区域(固定宽度且居中)】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 自定义顶部选项卡并居中显示.结合显示/隐藏view的方式实现切换功能(正常情况下可能是切换fragment). 效果图 代码分析 T ...

  6. TabTopUnderLineLayout【自定义顶部选项卡(带下划线)】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 自定义顶部选项卡布局LinearLayout类,实现带下划线样式的效果. 备注:如果配合Fragment的话,MainActivit ...

  7. TabTopAutoLayout【自定义顶部选项卡区域(带下划线)(动态选项卡数据且可滑动)】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 自定义顶部选项卡布局LinearLayout类,实现带下划线且可滑动效果.[实际情况中建议使用RecyclerView] 备注:如果 ...

  8. Android TabHost的使用 顶部选项卡

    用TabHost 来实现顶部选项卡,上代码:activity_main.xml <?xml version="1.0" encoding="utf-8"? ...

  9. 背水一战 Windows 10 (66) - 控件(WebView): 监听和处理 WebView 的事件

    [源码下载] 背水一战 Windows 10 (66) - 控件(WebView): 监听和处理 WebView 的事件 作者:webabcd 介绍背水一战 Windows 10 之 控件(WebVi ...

随机推荐

  1. java解析复杂的json字符串

    Java解析Json字符串--复杂对象(方法一)   { "name": "三班", "students": [ { "age&q ...

  2. Linux VIM8.1 Python3 编辑器配置文件

    Linux VIM8.1 Python3 编辑器配置文件 实现功能: 自动补全(包括函数模块方法补全) 自动代码标准格式化 自动检查代码错误 自定义头文件 自动括号补全 缩进指示线 代码一键折叠 代码 ...

  3. NOIP2018 填数游戏 搜索、DP

    LOJ 感觉这个题十分好玩于是诈尸更博.一年之前的做题心得只有这道题还记得清楚-- 设输入为\(n,m\)时的答案为\(f(n,m)\),首先\(f(n,m)=f(m,n)\)所以接下来默认\(n \ ...

  4. 从nsurlsession、Alamofire到moya

    更好的理解(抽象).更少的构建(配置).更方便的表达(语言) 一.iOS系统的网络编程(DSL概念) ios缺省的网络编程只是给出了网络编程的基本概念: urlsession.request.resp ...

  5. 类、闭包、monand

    类.闭包.monand 三者的相同点都是封装了数据与操作. 类:定义数据类型,倾向于数据的抽象:集合数据为操作提供上下文. 闭包:对环境变量和操作的封装抽象.操作基于环境变量,核心问题是环境变量的管理 ...

  6. springboot初体验-不知道怎么创建spring-boot项目?

    https://spring.io/projects/spring-boot/ 在以上地址找到 Quick start Bootstrap your application with Spring I ...

  7. Kafka MirrorMaker 跨集群同步工具

    一.MirrorMaker介绍 MirrorMaker是Kafka附带的一个用于在Kafka集群之间制作镜像数据的工具.该工具从源集群中消费并生产到目标群集.这种镜像的常见用例是在另一个数据中心提供副 ...

  8. 整理下log4net日志

    今天整理了下log4net日志,记录一下... 日志是一个系统排错的重要组成,有在之前的.NET中,微软还没有提供过像样的日志框架,目前能用的一些框架比如Log4Net.NLog.CommonLogg ...

  9. 服务器收不到支付宝notify_url异步回调请求的问题 支付宝notify 异步通知与https的问题

    需确认页面是http还是https,如果是https,那么需要安装ssl证书,证书要求有如下:要求“正规的证书机构签发,不支持自签名”. 然后赶快,按照支付宝,宝爷的要求,去自检了一下自家的证书,下面 ...

  10. 下一代微服务-ServiceMesh

    1.简介 系统服务化之后,服务间通信需要关注什么? 服务发现.负载均衡.路由.流控.通信可靠性.弹性.安全.监控.日志 API网关可以集中式的管理这些功能,但是会出现单点故障,并且实现起来网关会变得越 ...