1. 监听安卓返回键问题
效果: 在一级页面按一下返回键提示退出应用, 按两下退出应用; 在其它页面中, 按一下返回上个历史页面
- import mui from './assets/js/mui.min.js'
- vue.prototype.$mui = mui;
在一级页面 mounted 时
- this.$mui.plusReady( () =>{
- var backcount = 0;
- this.$mui.back = ()=> {
- if (this.$mui.os.iOS) return;
- if (backcount> 0) {
- if (Windows.plus) plus.runtime.quit();
- return;
- };
- this.$layer.msg('再点击一次退出应用!')
- backcount++;
- setTimeout( () =>{
- backcount = 0;
- }, 2000);
- };
- })
在其它页面 mounted 时
- this.$mui.plusReady(() => {
- this.$mui.back = () => {
- this.$router.go(-1);
- };
- });
在每次组件加载时都重写一下返回按钮的事件, 如果不重写, 此页面就会使用上个页面中定义的返回事件, 这个事件可能是退出 App 也可能是返回上次历史页面, 这样就会造成事件冲突, 所以在每次组件加载时都重写返回事件.
2. 键盘弹起会把固定在底部的导航顶上去
- data() {
- return {
- docmHeight: document.documentElement.clientHeight, // 默认屏幕高度
- showHeight: document.documentElement.clientHeight, // 实时屏幕高度
- hidshow: true // 显示或者隐藏 footer
- };
- },
- mounted() {
- // Windows.onresize 监听页面高度的变化
- Windows.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 : Windows.screen.height - Windows.innerHeight,
然后把这个高度给顶部导航和某些页面加上上边距就行了
来源: http://www.bubuko.com/infodetail-2905163.html