【报Bug】vue3 v-bind page失效

分类：uni-app

bug反馈

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

PC开发环境操作系统： Windows

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

HBuilderX类型：正式

HBuilderX版本号： 3.8.3

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

基础库版本号： 3.8.3.20230526

项目创建方式： HBuilderX

示例代码：


    import { defineProps, onMounted, ref } from 'vue'  
    const props = defineProps(['title'])  

    const demo = uni.getMenuButtonBoundingClientRect()  
    const heightStyle = ref(2 * demo.top + 2 * demo.height + 'rpx')  
    const back = () => {  
        uni.navigateBack({  
            delta: 1  
        })  
    }  
</script>  

<style lang="scss">  
         padding-top: v-bind(heightStyle);  //这种写法绑定不了值   
        padding-top: 112rpx; //这个可以  
    page {  
        padding-top: v-bind(heightStyle);  

        padding-top: 112rpx;  
    }  
</style>```

操作步骤：


    import { defineProps, onMounted, ref } from 'vue'  
    const props = defineProps(['title'])  

    const demo = uni.getMenuButtonBoundingClientRect()  
    const heightStyle = ref(2 * demo.top + 2 * demo.height + 'rpx')  
    const back = () => {  
        uni.navigateBack({  
            delta: 1  
        })  
    }  
</script>  

<style lang="scss">  
         padding-top: v-bind(heightStyle);  //这种写法绑定不了值   
        padding-top: 112rpx; //这个可以  
    page {  
        padding-top: v-bind(heightStyle);  

        padding-top: 112rpx;  
    }  
</style>```

预期结果：


    import { defineProps, onMounted, ref } from 'vue'  
    const props = defineProps(['title'])  

    const demo = uni.getMenuButtonBoundingClientRect()  
    const heightStyle = ref(2 * demo.top + 2 * demo.height + 'rpx')  
    const back = () => {  
        uni.navigateBack({  
            delta: 1  
        })  
    }  
</script>  

<style lang="scss">  
         padding-top: v-bind(heightStyle);  //这种写法绑定不了值   
        padding-top: 112rpx; //这个可以  
    page {  
        padding-top: v-bind(heightStyle);  

        padding-top: 112rpx;  
    }  
</style>```

实际结果：


    import { defineProps, onMounted, ref } from 'vue'  
    const props = defineProps(['title'])  

    const demo = uni.getMenuButtonBoundingClientRect()  
    const heightStyle = ref(2 * demo.top + 2 * demo.height + 'rpx')  
    const back = () => {  
        uni.navigateBack({  
            delta: 1  
        })  
    }  
</script>  

<style lang="scss">  
         padding-top: v-bind(heightStyle);  //这种写法绑定不了值   
        padding-top: 112rpx; //这个可以  
    page {  
        padding-top: v-bind(heightStyle);  

        padding-top: 112rpx;  
    }  
</style>```

bug描述：

page {
padding-top: v-bind(heightStyle); //这种写法绑定不了值
padding-top: 112rpx; //这个可以
}

2023-05-31 12:45 负责人:无分享

2 个回复

DCloud_UNI_WZF

失效是指之前可以吗？不生效原因是微信小程序变量绑到了页面根节点，以如下代码为例：

<template>  
    <view class="content">  
        <image class="logo" src="/static/logo.png"></image>  
        <view class="text-area">  
            <text class="title">{{title}}</text>  
        </view>  
    </view>  
</template>

就是 view.content 上，而 page(body) 是它的父级，无法获取该节点上的变量

2***@qq.com (作者)

我就是需要给全局绑定padding-top 而且是动态的所有使用v-bind

2023-05-31 15:38
2***@qq.com (作者)

<template>

<view class="title">

<view class="titleBox">

<image src="../static/title/arrows.png" mode="" @click="back"></image>

<text v-if="props.title">{{props.title}}</text>

<slot name="title" v-else></slot>

</view>

</view>

</template>

<script setup>

import { defineProps, ref } from 'vue'

const props = defineProps(['title'])

const demo = uni.getMenuButtonBoundingClientRect()

const heightStyle = ref(2 demo.top + 2 demo.height + 'rpx')

const back = () => {

uni.navigateBack({

delta: 1

})

}

</script>

<style lang="scss">

page {

padding-top: 112rpx;

}

</style>

<style lang="scss" scoped>

.title {

position: fixed;

background-color: #fff;

top: 0;

bottom: 100;

box-sizing: border-box;

height: v-bind(heightStyle);

width: 100vw;

display: flex;

align-items: flex-end;
```
    .titleBox {  

        height: 88rpx;  

        display: flex;  

        align-items: center;  



        text {  

            font-size: 28rpx;  

            margin-left: 20rpx;  

            margin-top: 20rpx;  

        }  



        image {  

            width: 40rpx;  

            height: 40rpx;  

            padding-left: 20rpx;  

        }  

    }  



}  
```
</style>

2023-05-31 15:38
DCloud_UNI_WZF

回复 2***@qq.com: 你的需求理解，但就目前看，这属于微信小程序的限制，v-bind pageMeta 等方式只能是静态数据

2023-05-31 16:15

朱小

你在当前页面设置v-bind 他只能作用到当前页面的最高层view，不能作用到page

2***@qq.com (作者)

和当前页应该没有什么关系我不使用v-bind 使用固定值绑定就可以成功

2023-06-01 08:51
朱小

回复 2***@qq.com: 不用v-bind当然可以呀，你仔细看我发的图嘛，v-bind的原理其实是在当前页最外层view添加一个样式，他的子集可以使用，父级使用不了

2023-06-01 09:14

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

【报Bug】vue3 v-bind page失效

bug描述：

2 个回复

公告

相关问题

【报Bug】vue3 v-bind page失效

bug描述：

与内容相关的链接

2 个回复

公告

相关问题