uni-app
uni-app copied to clipboard
nvue 中的 bindingx 只要含有 rgba 则不生效
代码如下:
<template>
<view style="flex:1">
<list ref="list" style="background-color:#f3f3f3;">
<cell v-for="item in lists" :key="item.id">
<text>{{item.text}}</text>
</cell>
</list>
<view ref="header" style="position: absolute;top:0;left:0;right:0;height:100px;background-color: rgba(0,0,0,0.5);justify-content: center;align-items: center;">
<text ref="text" style="color: rgba(255,255,255,1);">header</text>
</view>
</view>
</template>
<script>
const bindingX = uni.requireNativePlugin('bindingx')
export default {
data() {
const lists = []
for (let i = 0; i < 100; i++) {
lists.push({
id: i,
text: i,
})
}
return {
lists,
}
},
mounted() {
setTimeout(()=>{
bindingX.bind({
anchor: this.$refs.list.ref,
eventType: 'scroll',
props: [
{
element: this.$refs.header.ref,
property: 'background-color',
expression: `rgba(0,0,0,y<20?0.5:0.5-(((y-20)/200>0.5?0.5:(y-20)/200)))`,
},
{
element: this.$refs.text.ref,
property: 'color',
expression: `rgba(y<120?255:51,y<120?255:51,y<120?255:51,y<20?1:(y<120?(1-(((y-20)/100>1?1:(y-20)/100))):(y>220?1:(y-120)/100)))`
},
],
})
}, 500)
},
}
</script>
HBuilderX 3.5.3.20220729 版本中,以上代码运行后,只要expression
含有rgba
,则无效,视频如下:
https://vkceyugu.cdn.bspapp.com/VKCEYUGU-2990ed4f-051f-4f15-9beb-2cc68d0c4a77/0741aa05-b70d-4072-9a6f-f0a2f66349dd.mp4
https://user-images.githubusercontent.com/17996289/184844904-1a57fe1b-11e1-45c6-87f9-951864501479.mp4
但是在HBuilderX 3.4.7.20220422 版本中,则运行正常,视频如下: https://vkceyugu.cdn.bspapp.com/VKCEYUGU-2990ed4f-051f-4f15-9beb-2cc68d0c4a77/b69c160c-ef2e-4fb3-995f-2ee2b276771c.mp4
https://user-images.githubusercontent.com/17996289/184844921-f54054c9-85e1-42a6-881d-d4658c50c189.mp4
请问是什么问题导致?