xiaoliao998
xiaoliao998
  • 发布:2022-04-29 22:28
  • 更新:2022-08-11 19:00
  • 阅读:393

【报Bug】bindingx 绑定list 无法监听到滚动,无法实现动画

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win10

HBuilderX类型: Alpha

HBuilderX版本号: 3.4.8

手机系统: Android

手机系统版本号: Android 12

手机厂商: 华为

手机机型: 华为P40

页面类型: nvue

vue版本: vue2

打包方式: 云端

项目创建方式: HBuilderX

操作步骤:

这个bindingx 非常的不稳定,明明一样的代码,有时候能绑定,能实现动画,有时候就不行,每次uniapp 更新,就大概率掉链子,之前行了的又不行了。这动画贼难做。用其他方式做,这性能卡成狗了。

我反复纠结在 这个setTimeout这边,简直浪费时间啊 这肯定有Bug啊,而且按道理,onReady时已经完成了渲染,再加这个东西要干嘛。

加了后就出现,一会可以,一会不可以情况。这个BUG问题,困扰了1年多了。解决不了了

预期结果:

稳定的可以

实际结果:

不稳定,一会可以,一会不可以,绝对有BUG

bug描述:

<template>    
    <view class="page">    
        <list ref="list1" class="list">    
            <cell v-for="(item, index) in dataList" :key="item.id">    
                <view class="list-item">    
                    <text>{{item.name}}</text>    
                </view>    
            </cell>    
        </list>    
        <view ref="block" class="block"></view>    
    </view>    
</template>    

<script>    
    export default {    
        data() {    
            return {    
                dataList: []    
            }    
        },    
        onReady() {    
            for (var i = 0; i < 30; i++) {    
                this.dataList.push({    
                    id: i,    
                    name: i    
                });    
            }    

            setTimeout(() => {    
                this.bind();    
            }, 300)    
        },    
        methods: {    
            bind(e) {    
                const Binding = weex.requireModule('bindingx');    

                Binding.bind({    
                    eventType: 'scroll',    
                    anchor: this.getEl(this.$refs.list1),    
                    props: [{    
                            element: this.getEl(this.$refs.block), //动画元素    
                            property: 'opacity', //动画属性    
                            expression: '1-y/400' //表达式 说明了y从0-400,对应的值是1-0      
                        },    
                        {    
                            element: this.getEl(this.$refs.block), //动画元素    
                            property: 'transform.scale', //动画属性    
                            expression: 'y<200?1+y/200:2-(y-200)/200' //说明了y从0-200,对应的值是1-2    
                        }    
                    ]    
                }, (res) => {    
                    console.log(res);// 第二个参数    
                });    
            },    
            getEl(e) {    
                return e.ref;    
            }    
        }    
    }    
</script>    

<style>    
    .page {    
        flex: 1;    
        flex-direction: column;    
    }    

    .list {    
        flex: 1;    
        background-color: lime;    
    }    

    .list-item {    
        padding: 20px;    
        border-width: 1px;    
        border-style: solid;    
        border-color: #007AFF;    
    }    

    .block {    
        position: fixed;    
        left: 0;    
        top: 0;    
        width: 50px;    
        height: 50px;    
        background-color: red;    
    }    
</style>  

这个bindingx 非常的不稳定,明明一样的代码,有时候能绑定,能实现动画,有时候就不行,每次uniapp 更新,就大概率掉链子,之前行了的又不行了。这动画贼难做。用其他方式做,这性能卡成狗了。

我反复纠结在 这个setTimeout这边,简直浪费时间啊 这肯定有Bug啊,而且按道理,onReady时已经完成了渲染,再加这个东西要干嘛。

加了后就出现,一会可以,一会不可以情况。这个BUG问题,困扰了1年多了。解决不了了

2022-04-29 22:28 负责人:无 分享
已邀请:
2***@qq.com

2***@qq.com

你用这个@scroll="scroll" 不就很方便

要回复问题请先登录注册