2***@qq.com
2***@qq.com
  • 发布:2023-05-31 12:45
  • 更新:2023-05-31 16:08
  • 阅读:174

【报Bug】vue3 v-bind page失效

分类:uni-app

产品分类: 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 负责人:无 分享
已邀请:
DCloud_UNI_WZF

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

要回复问题请先登录注册