底部选项卡被底部小白条遮挡

有的机型底部有一个小白条，所以底部选项卡要有下边距，避免遮挡，具体方法参考：

小程序 safe-area-inset-bottom
js判断iPhone X，适配底部被小黑条遮挡问题

开启沉浸式导航后，导航高度在不同机型的显示问题

使用MUI框架开发APP，开启沉浸式导航以后，我们导航要留足状态栏的高度距离，但是在不同的机型下，状态栏的高度是不一样的，所以我们要获取状态栏的高度，动态修改导航的上偏移量。
首先，如果开启了沉浸式导航，就要获取状态栏的高度，导航栏的整体高度为自身高度加上状态栏高度，上边距为状态栏高度。内容区的上边距为导航的整体高度。
具体步骤参考：MUI 启用沉浸式&header显示问题

在iPhone手机底部出现白色条

在页面添加样式：

html,
body {position: relative;z-index: 99999;height: 100vh;
}

设置应用默认侧滑返回关闭Webview窗口

manifest.json文件中添加：

"plus" : {"popGesture": "close", //设置应用默认侧滑返回关闭Webview窗口，"none"为无侧滑返回功能，"hide"为侧滑隐藏Webview窗口。参考https://ask.dcloud.net.cn/article/102 }

修改状态栏背景颜色

在需要修改的状态栏颜色的前一个页面引入MUI H5模板的common.js

// 点击跳转到修改密码页，并修改状态栏颜色onForget(){let wn=clicked('pages/forget_password/forget_password.html');let bstyle=plus.navigator.getStatusBarStyle();wn.addEventListener('close',function(){//页面关闭后状态栏重置回以前的样式plus.navigator.setStatusBarStyle(bstyle);},false);},

在需要修改状态栏颜色的页面修改状态栏颜色。

mui.plusReady(function() {plus.navigator.setStatusBarStyle('dark');
})

区域滚动，双击滑回顶部

启用双击监听

mui.init({swipeBack: true ,//启用右滑关闭功能gestureConfig: {doubletap: true//启用双击监听},
});

手动初始化scroll控件，一定要初始化，不然没效果

mui.plusReady(function() {// 手动初始化scroll控件initScroll(false);
})

初始化下拉滚动函数

//初始化下拉滚动
let scrollTool;
function initScroll(flag = true) {setTimeout(function() {scrollTool = mui('.mui-scroll-wrapper').scroll({scrollY: true, //是否竖向滚动scrollX: false, //是否横向滚动startX: 0, //初始化时滚动至xstartY: 0, //初始化时滚动至yindicators: false, //是否显示滚动条deceleration: 0.0006, //阻尼系数,系数越小滑动越灵敏bounce: flag //是否启用回弹});}, 300);
}

触发代码关键词：ms

初始滚动DOM结构

<div class="mui-scroll-wrapper"><div class="mui-scroll"><!--这里放置真实显示的DOM内容--></div>
</div>

双击标题栏滑回顶部：@doubletap=“scrollToTop()”，触发代码关键词：mh

<header @doubletap="scrollToTop()" class="mui-bar mui-bar-nav"><a class="mui-action-back mui-icon mui-icon-arrowleft mui-pull-left"></a><h1 class="mui-title">标题</h1><a class="mui-btn mui-btn-link mui-pull-right">保存</a>
</header>

滑回顶部通用方法

//滚动到顶部
function scrollToTop() {setTimeout(function() {mui('.mui-scroll-wrapper').scroll().scrollTo(0,0,100);//100毫秒滚动到顶},500);
}

MUI框架开发app中出现的问题（持续更新中...）相关推荐

Android 高仿App项目归纳整理，持续更新中…
Android 高仿App项目归纳整理,持续更新中- Android高仿App项目整理,包含高仿了一些大公司的app,有基于Java,Kotlin,Flutter等语言的.对于开发我们自已的项目时可以 ...
Android开发人员不得不收集的代码(持续更新中)（http://www.jianshu.com/p/72494773aace，原链接）
Android开发人员不得不收集的代码(持续更新中) Blankj 关注 2016.07.31 04:22* 字数 370 阅读 102644评论 479喜欢 3033赞赏 14 utilcode D ...
【Python全栈开发从入门到实战】持续更新中......
本专栏为Python全栈开发系列文章,技术包括Python基础.函数.文件.面向对象.网络编程.并发编程.MySQL数据库.HTML.JavaScript.CSS.JQuery.bootstrap.W ...
阿里开发10年大牛：Android开发人员不得不收集的代码(持续更新中)
前言 1.软件吃掉世界,而机器学习正吃掉软件在数据爆炸的时代,如何创建「智能系统」成为焦点.这些应用程序内所体现的智能技术,并非是将实用指令添加到代码中,而是可以让软件自己去识别真实世界中发生的事件 ...
idea中刷新项目快捷键_IntelliJ Idea中常用快捷键（持续更新中）
alt+insert-----------创建包.类.文件等(本人笔记本电脑组合键为:fn+alt+insert) alt+enter------------导入包,补全内容,修改类名等 Ctrl+i ...
【微信小程序/云开发bug解决方案合集】持续更新中（最新22-11-21）
一.小程序前端 1. chooseMessageFile没反应在电脑端测试是调不出来微信聊天界面的,需要在真机调试中使用 2. pages/kaifazhe/kaifazhe" does ...
java开发中遇到的Bug(持续更新中)
1.Error creating bean with name 'XXX': Injection of autowired dependencies: 错误原因:实体类中没有@Component(&q ...
mysql查询更新优化_mysql查询优化(持续更新中)
1.索引不会包含有NULL值的列 (1) 应尽量避免在where子句中对字段进行null值判断,否则将导致引擎放弃使用索引而进行全表扫描 (2) 数据库设计时不要让字段的默认值为null,可以 ...
短链服务和应用场景介绍-初级入门(一) 连载持续更新中
目录 1.什么是短链? 2.为什么需要这种短链服务? 3.短链组成 4.最简单的方式 5.短链创建者和访问者周期 6.短链URL生成服务里面的问题你能提前想到哪些? 1.什么是短链? 协议://短链域 ...
制作拼多多app网页css,5+App下Mui框架开发仿拼多多App
5+App下Mui框架开发仿拼多多App 一.整体项目介绍说明二.页面展示三.页面实现主要技术和难点四.关键代码讲解五.源码资源一.整体项目介绍说明 "拼多多"App+移 ...

MUI框架开发app中出现的问题（持续更新中...）

MUI框架开发app中出现的问题