<template>
<view>
<view style="height: 50px;"></view>
pxH: {{pxH}} -- rpxH: {{ rpxH }}
<view style="flex-direction: row; width: rpx;">
<view @tap="changeHeight" class="asd" :style="{ height: rpxH + 'rpx' }"></view>
<view @tap="changeHeight" class="asd" :style="{ height: pxH + 'px', backgroundColor: 'blue' }"></view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
pxH: uni.upx2px(200),
rpxH: 200,
}
},
methods: {
changeHeight() {
this.pxH += uni.upx2px(200)
this.rpxH += 200
console.log(this.pxH, this.rpxH)
}
},
}
</script>
<style scoped lang="scss">
.asd {
background-color: red;
width: 300rpx;
transition-property: height;
transition-duration: 200;
/* #ifdef H5 */
transition: .2s
/* #endif */
}
</style>
安灬
- 发布：2021-11-12 11:09
- 更新：2021-11-12 14:57
- 阅读：341
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： win10
HBuilderX类型： 正式
HBuilderX版本号： 3.2.0
手机系统： iOS
手机系统版本号： iOS 14
手机厂商： 苹果
手机机型： 果x
页面类型： nvue
vue版本： vue2
打包方式： 云端
项目创建方式： HBuilderX
App下载地址或H5⽹址： https://m.feidanart.com/testfile/2a5b7833fa024849ea19d43fa37e5813.mp4
示例代码：
操作步骤：
点击红块,看红块高度变化
点击红块,看红块高度变化
预期结果：
红块应该每次点击增长100rpx
红块应该每次点击增长100rpx
实际结果：
红块每次点击增长100px应该
红块每次点击增长100px应该
bug描述：
在css3动画下,,ios的rpx无效,变为px效果
安灬 (作者)
我上传了视频附件,果x,3.2.13alpha异常,,,把transition-duration设置为0就正常,,安卓和h5正常
2021-11-12 15:44
安灬 (作者)
https://m.feidanart.com/testfile/2a5b7833fa024849ea19d43fa37e5813.mp4
2021-11-12 15:45
DCloud_UNI_Anne
回复 安灬: 试下HBuilderX 3.2.13alpha是否正常？
2021-11-12 19:48
安灬 (作者)
回复 DCloud_UNI_Anne: 视频里面用的就是3.2.13alpha
2021-11-13 09:02
DCloud_UNI_Anne
回复 安灬: 换其他设备试试
2021-11-17 18:05