当前位置: 首页 > Web前端 > HTML5

Mui技术问题总结

时间:2023-04-05 19:41:36 HTML5

跳转问题关闭原页面时闪退的问题:关闭页面时,一般使用plus.webview.currentWebview().close()来关闭当前页面,会出现这个问题time,即页面无法正常跳转,一直显示loading。解决办法是加一个延迟函数,延迟关闭页面。这样就可以成功进入新页面了,但是又会出现新的问题。当关闭旧页面时,它会在新页面上闪烁。这次体验非常糟糕。然后勾选之后,可以先隐藏,也就是隐藏,再关闭关闭。这里需要注意的是延迟时间的设置。隐藏延迟必须比关闭延迟短,否则达不到隐藏效果。无法解决旧页面关闭时闪退的问题。这里还需要注意的是,延时时间一定要合理设置,不能太长也不能太短。如果太短,将无法解决旧页面关闭时闪烁的问题。会出现老页面还没有关闭,又来到老页面,就会出问题,所以延迟时间的设置很重要。2、mui.openwindow打开已经打开的页面:通过openwindow打开已经打开但没有关闭的页面,mui.plusReady不会立即运行,所以页面不会刷新。因此,当打开的页面跳转到其他页面时,需要关闭该页面。3、文本内容加n不能换行的问题:这个问题是在设计协议样式的时候遇到的。我开始在百度上搜索如何包裹文本内容。目的,但是没有n显示,所以n应该可以起作用,只是这里没有换行,然后继续百度。最后发现是css的white-space属性的问题。这里默认是关闭换行的,所以改变white-space的属性后,n就可以进行换行了。以下是white-space的属性值:normal:忽略多余的空白,只保留一个空白(默认);pre:保留一个空白(行为类似于html中的pre标签);nowrap:只保留一个空白,文字不会换行,会在同一行继续,直到遇到br标签。pre-wrap:保留空白字符顺序,正常换行;pre-line:合并空白字符序列,保留换行符;inherit:从父元素继承white-space属性的值。我们这次的设置是white-space:pre-wrap,解决了n不能换行的问题。详情请参考:https://blog.csdn.net/weixin_38055381/article/details/860030344。图片加载不出来的问题:在某些地方,我发现我的图片无法显示。一开始以为是网络问题导致图片无法正常加载。后来发现不是网络问题,再通过百度发现,如果图片名称包含中文,则无法加载图片,所以图片名称一定不能包含汉字。5.弹出菜单关闭问题:使用弹出菜单跳转到页面后,返回时发现菜单没有关闭,导致用户体验存在一定问题。这里的解决方法是点击弹出菜单添加mui('#popover').popover('toggle');给事件,就可以解决弹出菜单点击跳转再返回页面时菜单没有关闭的问题。但是这个mui('#popover').popover('toggle');需要谨慎使用,因为mui.popover的作用不仅是关闭弹出菜单,还有打开弹出菜单的功能。所以一旦你在逻辑上使用mui('#popover').popover('toggle');那么不仅无法关闭弹出菜单,还会导致弹出菜单乱开。6、从阿里图标库中引入图标:由于mui本身的图标库非常有限,一般不能满足一个项目需要的图标,那么就需要引入外部图标,最常用的是阿里图标(具体网址:https://www.iconfont.cn/)进入图标库后,首先选择我们需要加入购物车的图标,然后进入购物车下载代码。下载后只需要将iconfont.ttf文件放入mui框架的font文件夹中,将css文件夹中的iconfont.css放入即可使用图标。调用方法class="mui-iconiconfont图标名称"需要导入之前的iconfont.css文件。7、手机物理返回键设置:在mui中,手机物理返回键默认返回上一级父页面,所以在某些情况下需要修改以保证逻辑的正确性。具体修改是修改mui.back修改,在里面添加你要跳转的页面,从而实现对手机物理返回键的控制。8.预加载问题:预加载就是在这个页面加载子页面。这样做的目的是为了防止下一个页面加载时间过长,导致体验出现问题。但是预加载会有一个问题,就是当你的父页面进行带参数的跳转时,如果下一页已经预加载了,那么你预加载页面的plusready就不会渲染了,也就是你通过varself=plus.webview.currentWebview();该方法获取不到上一页的传参,会报错。因此,预加载时必须考虑其他参数传递方式。使用openwindow传参,plus.webview.currentWebview()获取参数,我目前的方案是使用原生的localStorage来传。9、特殊图标颜色处理:这次进度条完全由图标组成,尤其是颜色处理是一个比较难的问题。因为对于数字图标的颜色,只能改变外圈的颜色,不能修改数字的颜色。这里有两种方法。首先是修改阿里巴巴图标库中图标的颜色。下载后不能用上面第六点的方法导入,因为导入的图标还是未修改的图标。在这里你必须使用符号引用,这样你就可以导入你自己修改的图标。另一种方法是通过修改background-color来修改文字颜色,然后让背景和图片一样的形状。但是这里会有一个问题就是icon会有一层阴影,导致和设计图不一样,那么怎么解决呢(我弄了几天了还是没有成功解决这个问题,最后还有一个同学解决了这个问题),就是把背景色做成渐变色,这样只要文字有颜色并且靠近图标边缘的区域都是一样的大背景色,这样解决了图标有阴影的问题,成功修改了图标里面文字的颜色。