Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

nvue 中的 bindingx 只要含有 rgba 则不生效 #120

Open
jinmarcus opened this issue Aug 16, 2022 · 0 comments
Open

nvue 中的 bindingx 只要含有 rgba 则不生效 #120

jinmarcus opened this issue Aug 16, 2022 · 0 comments
Assignees

Comments

@jinmarcus
Copy link

jinmarcus commented Aug 16, 2022

代码如下:

<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

error.mp4

但是在HBuilderX 3.4.7.20220422 版本中,则运行正常,视频如下:
https://vkceyugu.cdn.bspapp.com/VKCEYUGU-2990ed4f-051f-4f15-9beb-2cc68d0c4a77/b69c160c-ef2e-4fb3-995f-2ee2b276771c.mp4

right.mp4

请问是什么问题导致?

@jinmarcus jinmarcus changed the title bindingx 滚动未生效 nvue 中的 bindingx 滚动未生效 Aug 16, 2022
@jinmarcus jinmarcus changed the title nvue 中的 bindingx 滚动未生效 nvue 中的 bindingx 只要含有 rgba 则不生效 Aug 16, 2022
@zhetengbiji zhetengbiji transferred this issue from dcloudio/uni-app Feb 2, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants