顶部选项卡-可左右拖动(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-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联动滚动的更多相关文章
- MUI顶部选项卡的用法(tab-top-webview-main)
前 言 MUI是一款最接近原生APP体验的高性能前端框架,它的比较重要的功能是:下拉刷新.侧滑导航.滑动触发操作菜单和顶部(底部)选项卡等 最近用MUI做手机app应用的时候 ...
- 详解MUI顶部选项卡(tab-top-webview-main)的用法
最近用MUI做手机app的时候,遇到了一点问题.然后就对这个tab-top-webview-main的源码做了点研究,接下来我将和大家详解一下 tab-top-webview-main的用法和应该注意 ...
- mui 顶部选项卡的两种切换方式
mui 顶部选项卡的两种切换方式 第一种main页面 <!DOCTYPE html> <html> <head> <meta charset="ut ...
- mui 登录跳转到首页之后顶部选项卡不灵敏问题
前段时间开发一个用mui开发app的时候遇到了登录跳转到首页之后顶部选项卡会失灵的问题,多次尝试之后终于解决了,趁现在还有点印象记录一下吧. 一开始我是用mui.openWindow来新开首页的,出了 ...
- TabTopLayout【自定义顶部选项卡区域(固定宽度且居中)】
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 自定义顶部选项卡并居中显示.结合显示/隐藏view的方式实现切换功能(正常情况下可能是切换fragment). 效果图 代码分析 T ...
- TabTopUnderLineLayout【自定义顶部选项卡(带下划线)】
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 自定义顶部选项卡布局LinearLayout类,实现带下划线样式的效果. 备注:如果配合Fragment的话,MainActivit ...
- TabTopAutoLayout【自定义顶部选项卡区域(带下划线)(动态选项卡数据且可滑动)】
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 自定义顶部选项卡布局LinearLayout类,实现带下划线且可滑动效果.[实际情况中建议使用RecyclerView] 备注:如果 ...
- Android TabHost的使用 顶部选项卡
用TabHost 来实现顶部选项卡,上代码:activity_main.xml <?xml version="1.0" encoding="utf-8"? ...
- 背水一战 Windows 10 (66) - 控件(WebView): 监听和处理 WebView 的事件
[源码下载] 背水一战 Windows 10 (66) - 控件(WebView): 监听和处理 WebView 的事件 作者:webabcd 介绍背水一战 Windows 10 之 控件(WebVi ...
随机推荐
- CentOS7安装Node_exporter(二进制)
一.概述 Node_exporter是可以在* Nix和Linux系统上运行的计算机度量标准的导出器.Node_exporter 主要用于暴露 metrics 给 Prometheus,其中 metr ...
- Java学习:单列集合Collection
集合 学习集合的目标: 会使用集合存储数据 会遍历集合,把数据取出来 掌握每种集合的特性 集合和数组的区别 数组的长度是固定的.集合的长度是可变的. 数组中存储的是同一类型的元素,可以存储基本数据类型 ...
- In-Memory:哈希索引
SQL Server 2016支持哈希查找,用户可以在内存优化表(Memory-Optimized Table)上创建哈希索引(Hash Index),使用Hash 查找算法,实现数据的极速查找.在使 ...
- C# 取得对象属性类型
1.对象 Object obj; 2.对象属性 Type postType = obj.GetType(); PropertyInfo[] postTypeInfos = postType.GetPr ...
- ASP.NET 异步编程之Async await
本文重点介绍的是.NET Framework4.5 推出的异步编程方案 async await 请先看个5分钟的微软演示的视频:视频地址: https://channel9.msdn.com/Blo ...
- 前端自动显示信息的小demo
效果: //来到这个页面立即请求,展示客户公司名称 $(function () { $.ajax({ type:"GET", url:"${pageContext.req ...
- 微信小程序调用云函数出错 Error: errCode: -404011 cloud function execution error | errMsg: cloud.callFunction:fail cloud function service error code -501005, error message Environment not found;
错误异常: Error: errCode: -404011 cloud function execution error | errMsg: cloud.callFunction:fail cloud ...
- js获取浏览器的缩放状态,浏览器右上角的百分比缩放后的状态
首先说明,这里所说的浏览器状态是指用户点击浏览器左上角的放大加号/减号所产生的页面整体变大变小的情况(快捷键:Ctrl+加号或 Ctrl+减号 或 Ctrl+滚轮上下) 实现代码如下: detectZ ...
- QTGraphics-View拖拽以及鼠标指针操作
因为QGraphicsView继承自QWidget,它也提供了像QWidget那样的拖拽功能. 另外,为了方便,Graphics View框架也为场景以及每个item提供拖拽支持.当视图接收到拖拽事件 ...
- Android 系统自带图片裁剪功能(适配7.0、8.0、对了还有小米手机)
前段时间写了如何获取相册和拍照之后的照片并且进行显示和上传,这一次是如何进行圆形图像制作,经常看我写的笔记的人会知道,我很懒.那么我就懒的自定义了,目前需求就用原生的就好了,大神的轮子,我会在后面进行 ...