z***@foxmail.com

发布：2024-07-17 02:49
更新：2024-07-17 10:24
阅读：152

【报Bug】:style动态绑定height样式值用变量后，改变值后打包成微信小程序样式无变化

分类：uni-app

bug反馈

产品分类： uniapp/小程序/微信

PC开发环境操作系统： Windows

PC开发环境操作系统版本号： 10

HBuilderX类型：正式

HBuilderX版本号： 4.23

第三方开发者工具版本号： 1.06.2303220

基础库版本号：未知

项目创建方式： HBuilderX

示例代码：

html代码

<view class="testbox">  
                <view class="textdiv" :style="[{'height': zzz + 'upx'}]">zzzz</view>  
                <view class="zzbtn bg-green" @click.stop="changezzz(100)">变化试试</view>  
            </view>

js代码

<script>  
    export default {  
        components: {},  
        data() {  
            return {  
                zzz: 50  
            }  
        },  
        methods: {  
            changezzz(value) {  
                if (this.zzz == 50) {  
                    this.zzz = value;  
                } else {  
                    this.zzz = 50;  
                }  
            }  
        }  
    }  
</script>

css代码

.testbox{  
        display: flex;  
    }  
    .textdiv{  
        border: 1px solid red;  
        width: 200upx;  
    }  
    .zzbtn{  
        height: 50upx;  
        width: 200upx;  
    }

操作步骤：

按照以上代码，写一个vue，在内置浏览器可以点击【变化试试】切换view的高度，但是打包成微信小程序后无法改变高度

预期结果：

微信小程序可以改变高度样式

实际结果：

内置浏览器可以改变，但是打包成微信小程序后无法改变，并且在微信开发者工具里也无法改变

bug描述：

通过:style动态绑定样式，然后通过js改变变量的值从而改变样式，在内置浏览器可以改变，但是打包成微信小程序后无法改变

2024-07-17 02:49 负责人:无分享

2 个回复

套马杆的套子 - 没有解决不了的问题，只有解决不完的问题

upx是不支持动态绑定的，官方也早就用rpx去替代了，你可以用rpx或者px

z***@foxmail.com (作者)

你好，首先感谢你的解答，然后我知道那个单位，但是我反馈的问题不是这个单位的问题，而是修改变量数值不生效，单位换成rpx也不生效，主要是js改了:style里绑定的zzz值，但是页面上的样式并没有跟着变

2024-07-17 10:00
套马杆的套子

回复 z***@foxmail.com: 你试了么？换成px或者rpx，我给你试过了，是好使的，就用的你的代码，给单位换了

2024-07-17 10:21
z***@foxmail.com (作者)

回复套马杆的套子: 我试过了，并且我也试了不设置高度而是设置背景色或者边框颜色切换，到微信小程序上都是失效的，不用纠结px单位，在电脑上或者app是正常的，你是在小程序上试的吗？

2024-07-17 11:50
套马杆的套子

回复 z***@foxmail.com: 你看我下面的评论，加附件的视频，，就是微信小程序啊，而且开发工具版本和你一样

2024-07-17 13:24
z***@foxmail.com (作者)

回复套马杆的套子: 非常感谢你的解答，我刚才又试了下，发现了问题规律，就是当前元素下面还有别的元素，导致布满页面的时候我增加高度就会不执行，而如果当前元素下面有空白区域，我增加当前元素的高度的时候就可以增加，这个不知道你有没有好的解决方案，其他平台都可以，就微信小程序不行

2024-07-17 20:53
套马杆的套子

回复 z***@foxmail.com: 代码贴出来

2024-07-18 07:57

套马杆的套子 - 没有解决不了的问题，只有解决不完的问题

你看一下附件，是视频，你看下好使不。这个问题这就是单位的问题，我上面给你截图的也说的很清楚了啊，upx动态绑定是无法编译的，得需要用upx2px来转换，你的代码也没转换，肯定不好使啊

<template>  
    <view>  
        <view class="testbox">  
            <view class="textdiv" :style="{'height': zzz + 'rpx'}">zzzz</view>  
            <view class="zzbtn bg-green" @click.stop="changezzz(100)">变化试试</view>  
        </view>  
    </view>  
</template>  

<script>  
    export default {  
        components: {},  
        data() {  
            return {  
                zzz: 50  
            }  
        },  
        methods: {  
            changezzz(value) {  
                if (this.zzz == 50) {  
                    this.zzz = value;  
                } else {  
                    this.zzz = 50;  
                }  
                console.log('1111',this.zzz );  
            }  
        }  
    }  
</script>  

<style>  
    .testbox {  
        display: flex;  
    }  

    .textdiv {  
        border: 1px solid red;  
        width: 200upx;  
    }  

    .zzbtn {  
        height: 50upx;  
        width: 200upx;  
    }  
</style>

c25a9a9469f6e6768b042d45100458c8.rar

要回复问题请先登录或注册

【报Bug】:style动态绑定height样式值用变量后，改变值后打包成微信小程序样式无变化

操作步骤：

按照以上代码，写一个vue，在内置浏览器可以点击【变化试试】切换view的高度，但是打包成微信小程序后无法改变高度

预期结果：

微信小程序可以改变高度样式

实际结果：

内置浏览器可以改变，但是打包成微信小程序后无法改变，并且在微信开发者工具里也无法改变

bug描述：

2 个回复

公告

相关问题

【报Bug】:style动态绑定height样式值用变量后，改变值后打包成微信小程序样式无变化

操作步骤： 按照以上代码，写一个vue，在内置浏览器可以点击【变化试试】切换view的高度，但是打包成微信小程序后无法改变高度

预期结果： 微信小程序可以改变高度样式

实际结果： 内置浏览器可以改变，但是打包成微信小程序后无法改变，并且在微信开发者工具里也无法改变

bug描述：

与内容相关的链接

2 个回复

公告

相关问题

操作步骤：

按照以上代码，写一个vue，在内置浏览器可以点击【变化试试】切换view的高度，但是打包成微信小程序后无法改变高度

预期结果：

微信小程序可以改变高度样式

实际结果：

内置浏览器可以改变，但是打包成微信小程序后无法改变，并且在微信开发者工具里也无法改变