uni-app iOS端bindingx在list中使用scroll+transform.translateY结果有偏差

开发环境	版本号	项目创建方式
Mac	12.3.1	HBuilderX

示例代码：

<template>  
    <view>  
        <list :bounce="false" ref="test">  
            <cell style="height: 200rpx;background-color: antiquewhite;"></cell>  
            <cell v-for="i in 30">  
                <view style="height: 300rpx;align-items: center;">  
                    <text>{{ i }}</text>  
                </view>  
            </cell>  
        </list>  
        <view style="position: absolute;width: 200rpx;height: 200rpx;left: 200rpx;background-color: red;" ref="float"></view>  
    </view>  
</template>  

<script>  
function delay(ms) {  
    return new Promise(resolve => setTimeout(resolve, ms));  
}  
const BindingX = uni.requireNativePlugin('bindingx');  
export default {  
    data() {  
        return {};  
    },  
    async onReady() {  
        await this.$nextTick();  
        await delay(50);  
        let testEl = this.getEl(this.$refs.test);  
        let floatEl = this.getEl(this.$refs.float);  
        let tokenObj = BindingX.bind(  
            {  
                anchor: testEl,  
                eventType: 'scroll',  
                props: [  
                    {  
                        element: floatEl,  
                        property: 'transform.translateY',  
                        expression: 'y * -1'  
                    }  
                ]  
            },  
            e => {}  
        );  
    },  
    methods: {  
        getEl(el) {  
            if (typeof el === 'string' || typeof el === 'number') return el;  
            if (WXEnvironment) {  
                return el.ref;  
            } else {  
                return el instanceof HTMLElement ? el : el.$el;  
            }  
        }  
    }  
};  
</script>  

<style></style>

操作步骤：

创建nvue页面，使用以上代码示例

{
    "style": {  
        "navigationStyle": "custom",  
        "disableScroll": true  
    }  
}

在iOS设备或模拟器运行后，向上滑动即可发现

预期结果：

iOS与android保持一致

实际结果：

android正常，iOS有偏差

bug描述：

使用场景：nvue中使用BindingX，绑定list组件的scroll，然后用transform.translateY移动其他元素

结果：android正常，iOS有偏差

phonegap100 1楼•21 天前

期待朱老师的all in list

itying888 2楼•21 天前

问题已记录

yibo5220 3楼•21 天前

请问，有没有计划修复时间?

yibo5220 4楼•21 天前

感觉就是精度计算有问题，应该很好修复的，能不能加快进度呢？

htzhanglong 5楼•21 天前

3.5.1 已修复

yibo5220 6楼•21 天前

测试确认修复，辛苦了！

caililin 7楼•21 天前

在使用 uni-app 的 bindingx 在 iOS 端实现 list 中的 scroll + transform.translateY 时，可能会出现结果偏差的问题。这通常是由于 iOS 的渲染机制与 Android 不同，导致 transform 的偏移量计算不准确。以下是一些可能的原因和解决方案：

可能的原因

iOS 的渲染机制：
- iOS 对 transform 的处理方式与 Android 不同，尤其是在滚动容器中，可能会导致偏移量计算不准确。
BindingX 的兼容性问题：
- bindingx 在 iOS 端的实现可能存在一些兼容性问题，尤其是在处理 scroll 和 transform 的组合时。
CSS 样式问题：
- 如果 list 或子元素的样式设置不当（如 position、overflow 等），可能会导致 transform 的偏移量计算错误。
性能优化：
- iOS 可能会对某些 CSS 属性进行优化，导致 transform 的渲染结果与预期不一致。

解决方案

使用 position: absolute 替代 transform：
- 如果可能，尝试使用 position: absolute 和 top 属性来实现偏移，而不是 transform.translateY。这样可以避免 iOS 的渲染问题。
```
.item {
  position: absolute;
  top: var(--offsetY);
}
```
检查 list 的样式：
- 确保 list 的样式设置正确，例如 overflow: scroll 或 overflow: auto，并且 position 属性没有冲突。

使用 bindingx 的 expression 优化：

在 bindingx 的 expression 中，确保偏移量的计算逻辑正确，并且考虑到 iOS 的渲染机制。

bindingx.bind({
  eventType: 'scroll',
  props: [
    {
      element: this.$refs.list,
      property: 'transform.translateY',
      expression: 'y + 0'
    }
  ]
});

使用 uni-app 原生组件：
- 如果 bindingx 的问题无法解决，可以尝试使用 uni-app 的原生组件（如 scroll-view）来实现滚动效果，避免使用 bindingx。
调试和日志：
- 在 iOS 端调试时，打印 scroll 事件的 offsetY 或 transform 的值，检查是否与预期一致。
更新 uni-app 和 bindingx：
- 确保使用的 uni-app 和 bindingx 版本是最新的，可能问题已经在后续版本中修复。
使用 weex 原生模块：
- 如果问题仍然存在，可以尝试使用 weex 的原生模块来实现类似功能，避免 bindingx 的兼容性问题。

示例代码

以下是一个简单的示例，使用 bindingx 实现 list 中的 scroll + transform.translateY：

<template>
  <view class="container">
    <scroll-view class="list" scroll-y @scroll="handleScroll">
      <view class="item" v-for="(item, index) in list" :key="index">
        {{ item }}
      </view>
    </scroll-view>
  </view>
</template>

<script>
import BindingX from 'bindingx';

export default {
  data() {
    return {
      list: Array.from({ length: 50 }, (_, i) => `Item ${i + 1}`)
    };
  },
  methods: {
    handleScroll(event) {
      const offsetY = event.detail.scrollTop;
      BindingX.bind({
        eventType: 'scroll',
        props: [
          {
            element: this.$refs.list,
            property: 'transform.translateY',
            expression: `${offsetY} + 0`
          }
        ]
      });
    }
  }
};
</script>

<style>
.container {
  height: 100vh;
}

.list {
  height: 100%;
  overflow-y: scroll;
}

.item {
  height: 50px;
  line-height: 50px;
  text-align: center;
  border-bottom: 1px solid #ccc;
}
</style>