博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vue+hbuilder开发app记录
阅读量:5937 次
发布时间:2019-06-19

本文共 1646 字,大约阅读时间需要 5 分钟。

1.监听安卓返回键问题

效果:在一级页面按一下返回键提示退出应用,按两下退出应用;在其它页面中,按一下返回上个历史页面

import mui from './assets/js/mui.min.js'Vue.prototype.$mui = mui;

在一级页面mounted时

1 this.$mui.plusReady( () =>{ 2 var backcount = 0; 3 this.$mui.back = ()=> { 4 if (this.$mui.os.ios) return; 5 if (backcount > 0) { 6 if (window.plus) plus.runtime.quit(); 7 return; 8 }; 9 this.$layer.msg('再点击一次退出应用!')10 backcount++;11 setTimeout( () =>{12 backcount = 0;13 }, 2000);14 };15 })

 

 在其它页面mounted时

1 this.$mui.plusReady(() => {2 this.$mui.back = () => {3 this.$router.go(-1);4 };5 });

 

在每次组件加载时都重写一下返回按钮的事件,如果不重写,此页面就会使用上个页面中定义的返回事件,这个事件可能是退出app也可能是返回上次历史页面,这样就会造成事件冲突,所以在每次组件加载时都重写返回事件.

2.键盘弹起会把固定在底部的导航顶上去

data() {    return {      docmHeight: document.documentElement.clientHeight, //默认屏幕高度      showHeight: document.documentElement.clientHeight, //实时屏幕高度      hidshow: true //显示或者隐藏footer    };  },  mounted() {    // window.onresize监听页面高度的变化    window.onresize = () => {      return (() => {        this.showHeight = document.body.clientHeight;      })();    };  },  watch: {    showHeight: function() {      if (this.docmHeight > this.showHeight) {        this.hidshow = false;      } else {        this.hidshow = true;      }    }  }

注意document要撑满屏幕高度!

参考地址:https://www.jianshu.com/p/210fbc846544

3.切换页面的转场效果使用:vueg

参考网址:https://github.com/jaweii/vueg

4.上拉加载下拉刷新使用:mescroll

参考网址:http://www.mescroll.com/

5.设置沉浸式

配置manifest.json"plus": {    "statusbar": {        "immersed": true     },    "google": {        "immersedStatusbar": true,    }}

获取状态栏高度,可以使用mui提供的方法,也可以使用js  :  window.screen.height - window.innerHeight,

然后把这个高度给顶部导航和某些页面加上上边距就行了

转载于:https://www.cnblogs.com/yk-68/p/9766579.html

你可能感兴趣的文章
物理网卡在ESXi/ESX服务器中的推荐配置方式
查看>>
实战浪潮英信服务器web部署操作过程(3)
查看>>
Spring 定时任务实现 以及无法正常执行分析
查看>>
Linux基础(11)文本处理三剑客之sed
查看>>
bash命令行快捷键整理
查看>>
Zabbix3.2.6之通过JMX监控Tomcat
查看>>
2013美赛建模算法关键词
查看>>
Android-Parcelable理解与使用(对象序列化)
查看>>
数据结构----图(邻接表用法)
查看>>
批量扫描雏形之在Java中调用nmap进行主机探测
查看>>
我的友情链接
查看>>
SVN命令详解
查看>>
Windows的资源监视器
查看>>
Android图形解锁的绘制
查看>>
UML基础系列:类图
查看>>
学习日志---树回归(回归树,模型树)
查看>>
Gene6_FTP_Server_高级配置
查看>>
centos 7编译安装nginx
查看>>
【学神】1-15 linux启动及常见故障的排除
查看>>
Android SDK 在线更新镜像服务器资源
查看>>