如何tabbar webview 左右滑动切换，就像微信一样。

分类：MUI

mui 的tabbar 好像只能点击导航栏的图标切换页面，怎么才能左右滑动切换页面呢？有没有相关事件

2015-10-02 00:51 负责人:无分享

5 个回复

火骑士空空 (作者)

  我现在能想到的方法就是通过子WebView 的touchmove 事件，向父WebView 传递手指的水平位移值，

然后父WebView再滚动相应的距离，但是实现后效果不是太好，有些卡顿。。不知道为什么。。。

父WebView

window.addEventListener('scrollX', function(event) {  
                var scrollX = document.body.scrollLeft;  
                scrollX += event.detail.directX;  
                window.scrollTo(scrollX, 0);  
            });

子WebView:

window.addEventListener('switchTab', function(event) {  
    var self = plus.webview.currentWebview();  
    var parentWV = self.parent();  
    console.log("333");  
    var body = document.getElementsByTagName('body')[0];  
    var startX = 0;  
    body.addEventListener('touchstart', function(e) {  
        var touches = e.touches;  
        startX = touches[0].pageX;  
    });  
    body.addEventListener('touchmove', function(e) {  
        var touches = e.touches;  
        var nowX = touches[0].pageX;  
        var x = nowX - startX;  
        mui.fire(parentWV, 'scrollX', {  
            directX: startX - nowX  
        });  
    });  
    body.addEventListener('touchend', function() {});  
});

火骑士空空 (作者)

还是不行，就算使用e.touches[0].screenX 获取的还是相对于webview的坐标，没办法。。。。求救中。。。。

chender - 与人为善

可以考虑不设置父子关系，就这样可以通过转场动画来模拟了，虽然效果上上有所差异，但是肯定不会卡

火骑士空空 (作者)

我想做的是让webview跟着手指动，不是直接转场。。。0.0

2015-10-02 20:14
火骑士空空 (作者)

我试了，直接控制webview的left也一样有问题，手指触摸点的值总是相对与webview。

但是这样就会有个问题，比如说：startX=360；手指左滑10 即nowX=350，此时设置webview的left= -10，然后就在这一瞬间，nowX变回360，并且还会触发touchmove事件，接着webview就会不停的左右闪。

2015-10-02 21:06

chender - 与人为善

你的这个需求估计很难满足啊，跨webview的调用本来都比较耗时，即使逻辑上行得通也肯定会很卡的

唏嘘的胡渣 - 懒贯穿了整个人生，咸鱼就是一生的梦想

难难难

该问题目前已经被锁定, 无法添加新回复

如何tabbar webview 左右滑动切换，就像微信一样。

5 个回复

公告

相关问题

如何tabbar webview 左右滑动切换，就像微信一样。

与内容相关的链接

5 个回复

公告

相关问题