对富文本进行优化:
1、让富文本段落两端对齐并首行缩进:
需要将相应的CSS代码施加在富文本标记对中。
<rich-text class=“richText” ></rich-text>
.richText{
text-align:justify; text-indent:2em; }
注意:对于富文本标记对内部的“文本标记对”不能设置样式。
2、首行缩进导致图片和图片说明文本都具备缩进大小。
解决:
let reg1=new RegExp("<p><img","gi");
let reg1=/<p><img/gi;
this.newsDetailData.content=this.newsDetailData.content.replace(reg1,"<p style='text-indent:0;'><img ");
let reg2=new RegExp('<p\\s{1,}class="img-desc"\\s{0,}>',"gi");
let reg2=/<p\s{
1,}class=\“img-desc\”\s{
0,}>/gi;
this.newsDetailData.content=this.newsDetailData.content.replace(reg2,'<p class="img-desc" style="text-indent:0;text-align:center;font-size:14px;font-weight:bold">')
样式问题
1、组件和调用此组件的页面样式最好不要重名,不然会有样式覆盖问题。
2、数据绑定变量的时候不能识别upx,可以转化
computed: {
halfWidth() {
return uni.upx2px(750 / 2) + 'px'; //350upx
}
}
3、css获取状态栏的高度var(–status-bar-height)
小程序中是固定25px;;5+app是真实状态栏高度;H5是0;
注:真机才管用
事件问题
1、blur事件比页面的点击事件慢
input、textarea获取值的时候用 v-model 双向绑定,或者用 input 事件,尽量少用blur事件;
2、uni.chooseLocation()
uni-app的uni.chooseLocation()在真机上不执行 fail ,还有 cancel ,只执行success。
uni.chooseLocation({
fail:function(){
//不执行
console.log('失败');
},
cancel:function(){
//不执行
console.log('取消');
},
success: function(res){
console.log('成功');
},
complete:function(){
//成功后
console.log('完成');
}
})
注:成功后执行complete,失败或者取消不执行complete
3、点击按钮显示输入框,输入框自动聚焦,弹不起软键盘(弹起后马上又收回去)
可以先显示输入框,延迟100ms让输入框聚焦。
4、组件属性设置不生效解决办法
(1)监听scroll事件,记录组件内部变化的值,在设置新值之前先设置为记录的当前值。
<scroll-view :scroll-top="scrollTop" scroll-y="true" @scroll="scroll">
methods: {
scroll: function(e) {
this.old.scrollTop = e.detail.scrollTop
},
goTop: function(e) {
this.scrollTop = this.old.scrollTop
this.$nextTick(function() {
this.scrollTop = 0
});
}
}
(2)监听scroll事件,获取组件内部变化的值,实时更新其绑定值
<scroll-view :scroll-top="scrollTop" scroll-y="true" @scroll="scroll">
methods: {
scroll: function(e) {
this.scrollTop = e.detail.scrollTop
},
goTop: function(e) {
this.scrollTop = 0
}
}
第二种解决方式在某些组件可能造成抖动,推荐第一种解决方式。
详见官方文档的使用Vue.js注意事项——常见问题——4. 组件属性设置不生效解决办法。
链接:uni-app官方文档
5、禁止蒙版下的页面滚动
(1)可使用 @touchmove.stop.prevent=“moveHandle”,moveHandle 可以用来处理 touchmove 的事件,也可以是一个空函数。
<view class="mask" @touchmove.stop.prevent="moveHandle"></view>
缺点:如果遮罩中的modal也需要滚动时,上面的办法失效。
(2)蒙版中需要滚动的内容用scroll-view标签,蒙版下需要滚动的内容也用scroll-view标签(需设置高度,不能产生页面滚动条),再加上(1)中阻止滚动的方法。
缺点:不能使用页面的刷新加载方法,只能用scroll-view的触底方法。
(3)蒙版中需要滚动的内容用scroll-view标签,加上(1)中阻止滚动的方法。
缺点:当蒙版中滚动内容触底或者到顶部后,页面开始滚动。
6、原生组件的层级问题
微信小程序端的原生组件有camera、canvas、input(仅在focus时表现为原生组件)、live-player、live-pusher、map、textarea、video。可以用cover-view、cover-image来进行覆盖。
5+app端的原生组件有video。也可以用cover-view、cover-image来进行覆盖,但是不支持嵌套,可以引入原生子窗体,为了不影响性能,原生子窗体最好不多于三个。
分类列表</