Vue
2023年5月6日

uniapp使用过程中一些踩坑

作者 admin

1.carousel-3d轮播图transfrom 斜切移动图片模糊(ios)表现为—transform y轴斜切计算浮点不准确，

1-1.设置偶数或调整斜切y方向为0。

1-2.图片css设置

img{image-rendering: -moz-crisp-edges; /* Firefox /

image-rendering: -o-crisp-edges; / Opera */

image-rendering: -webkit-optimize-contrast; /*Webkit (non-standard naming)

image-rendering: crisp-edges; /-ms-interpolation-m[[ode: nearest-neighbor; / IE (non-standard property) */}

2.carousel-3d轮播图点击后无法轮播(文档太差了没方法，只能看例子跟原型链属性找)

//先暂停

this.carousel.pauseAutoplay()

在开启

setTimeout(() => {

this.carousel.startAutoplay()},

0)

3.scroll-view 切换分栏，回到顶部滚动条不重置，

切换tab时执行：

this.scrollTop = this.scrollTop === 0 ? 1:0 //手动设置，避免数据刷新视图未刷新

4.scroll-ivew列表拖移问题(ios)，添加禁止向上冒泡

在scrollView标签内添加以下属性:disableBounce=”true”

//开启禁止弹性滚动@touchmove.stop

//开启禁止向上冒泡

5.浮动弹窗滑动 ，底层也跟着移动。

—-设置在标签内添加以下属性 —-@touchmove.stop.prevent 禁用移动层位移

6.底部弹层弹层异常uni-popup，不吸底。

修改源码 ,在uni-popup.vue文件内 ，

.uni-popup__wrapper-box { /* #ifndef APP-NVUE */ display: block;

/* #endif */ position: relative;

/* iphonex 等安全区设置，底部安全区适配 */ /* #ifndef APP-NVUE *

/ //注释此行 padding-bottom: constant(safe-area-inset-bottom);

//注释此行 padding-bottom: env(safe-area-inset-bottom); /* #endif */ }

注释预留的吸底安全区代码，就可以吸底了

7.boder绘制线段，浮点数在iphonexs上异常消失最小设置1像素，避免问题。

8.子组件没有onshow与onload方法，

父组件逻辑尽可能写到onShow内，onlad初始化只执行一次，onShow是每次进来都会执行，通常写一些数据初始化(接口，刷新内容)。

9.高度塌陷问题，与页面适配1.子容器撑开父容器–遇到高度塌陷问题。

1-1.设置元素的浮动

1-2.将元素设置为行内块元素：display:inline-block

1-3.设置overflow为非visible的值：overflow:hidden

2.适配建议外层使用百分比，非必要元素可写px，编译过程中会自动转义像素适配。

10.canvas相关，图片loading，跨域下载，图片展示，长按保存。

1.使用时先请求接口拿到接口链接，分别进行加载，下载图片到本地，

绘制-通过回调拉起窗口

uni.showLoading({ title: ‘加载中’, mask: true });

const img = new Image() img.src = userInfo.avatar;

img.onload = async (res) => { await this.inCanvas() uni.hideLoading()//拿不到canvas展示出来回调函数暂时这么写 this.posterState = true; }

2.直接用的图片，会跨域，这里要先进行下载，把图片下到本地：uni.getImageInfo({ src: _this.photoPath, success(res) { //开始绘制 }, fail(res){ //绘制失败 }) }

3.绘制完成导出为指定大小图片,把this.tempFilePath插入标签的src=“”内 let me = this uni.canvasToTempFilePath({ canvasId: ‘shareCanvas’, async success(res) { onsole.log(‘success’, res) me.tempFilePath = res.tempFilePath }, fail(e) { console.log(‘fail’, e) } })

4. 与 有区别 ，image更预览纯看，img适合引用,在浏览器内长按会存在不同表现方式。

二.组件封装建议

1.-遍历item与data传递尽量写父组件上(子组件没有onload与onShow)，不然处理起来很麻烦。

2.-子组件制作时候尽量提取公共方法，扩展函数兼容多种参数已达到不同效果。

3.写了8个组件最后因为各种优化，需求的改动，只用到了5个，造轮子前多与后端和产品交流，避免浪费开发资源。

标签Vue

77 条评论在 “uniapp使用过程中一些踩坑”

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注