滔滔江水
滔滔江水
  • 发布:2014-09-09 17:22
  • 更新:2017-05-02 21:05
  • 阅读:17511

HBuilder安卓应用如何实现左右滑动,切换界面!

分类:HTML5+

本人想实现类似于微信那种,但不一定要微信那么玄,只想简单实现通过手势向左滑动,就打开左边界面,向右滑动就打开显示右边界面!本人新手,公司正在做这方面的开发,多谢各位大神支招了!

2014-09-09 17:22 分享
已邀请:
DCloud_UNI_CHB

DCloud_UNI_CHB

有单页拖div和多webview拖webview这2种方法。多webview使用webview的drag方法。
hello mui里有示例中的offcavas (侧滑导航)示例

  • 滔滔江水 (作者)

    界面整体下面有个选项卡,我个人认为应该是,添加左右滑动事件,实现中间界面切换,我不太清楚,左右滑动事件,怎么调用,或者mui有例子没,麻烦给说下!你的建议我已经看过了,里面是策划导航,本人可能才疏学浅,没有想出更有效的解决办法,还望指点,非常感谢了

    2014-09-10 09:41

  • DCloud_UNI_CHB

    你是要局部滑动,不是整体页面滑动吧?看看hello mui示例中的grid-->左右滑动分页样式,是不是你想要的。

    2014-09-10 10:58

  • 滔滔江水 (作者)

    回复 DCloud_UNI_CHB:你说的这个,能自动滑动,麻烦问下,你知道左右滑动监听事件不

    2014-09-10 13:22

  • DCloud_UNI_CHB

    回复 滔滔江水:swipeleft和swiperight

    2014-09-10 15:03

  • blucee

    这里能不能用子页面解决?

    2015-10-31 14:58

Sky_

Sky_

那个是局部段落滑动,大的整个页面滑动,没有专门的控件

超仔爱生态闭环

超仔爱生态闭环

我认为比较好的两种方式:
1.singlePage模式;
就是你所有的页面都整合成一个页面,h5监听手势事件,ajax请求不同的内容即可,通过js和css协作显示所需模板。
2.多webview模式;
native监听手势事件,从而调用不同的webview,webview中已存在所需页面,最终实现。

ad

ad

window.addEventListener("swiperight", function(e) {  
                        //默认滑动角度在-45度到45度之间,都会触发右滑菜单,为避免误操作,可自定义限制滑动角度;  
                        if (Math.abs(e.detail.angle) < 30) {  
                            self.close();  
                        }  
                    });  

官方示例中的代码,已测试可用

咆哮的企鹅

咆哮的企鹅 - 敲代码?慢性自杀:植物人

可参考 hello mui 实例中的segment(分段选择)
第二项 可拖动选项卡

橘子好酸啊

橘子好酸啊

关于singlePage模式,思路是使用div分割页面,推荐一个js插件,Swiper.js,很好用,可以实现整页翻动效果并支持嵌套,性能页还不错,对于接口比较开放。

要回复问题请先登录注册