使用scroll-view小程序滑动过程不断动态加载节点 实现丝滑滑动效果

项目场景：

使用scroll-view小程序滑动过程不断动态加载节点 实现丝滑滑动效果

解决方案：

当位置变动时

1. scroll-view 加scroll-anchoring属性

scroll-anchoring属性：防止在滑动过程中位置改变导致scrollLeft不固定 产生抖动

2.更新scrollLeft

更新scrollLeft：记录点击拖动时scrollLeft的位置+动态加载新生成的几个节点的长度
保持拖动位置视野窗口不变 不会因为新生成的节点而跳到前面

改变横向滚动条位置scroll-left="{{scrollLeft}}"

<scroll-view 
id="m-a" 
class="" 
bind:scrolltoupper="onLeft" 
bind:scrolltolower="onRight" 
scroll-left="{{scrollLeft}}" 
scroll-x 
enable-flex 
scroll-anchoring="{{true}}"
>

    onScroll(e) {
      // console.log(e)
      this._scrollLeft = e.detail.scrollLeft
    },

3.阻止惯性

在获取scorllLeft时 禁用scroll-x即不允许横向滑动，使scrollLeft的值不会再随惯性滑动而改变。禁用scroll-x是在真机上也能丝滑滑动的关键。

scroll-x="{{enable}}"

用lock函数改变enable值

lock () {
      return new Promise(resolve => {
        this.setData({
          enable: false
        }, () => this.setData({
          enable: true
        }, resolve))
      })
    },

当函数执行成功后

fn(){
 		await this.lock()
        this.setData({
          scrollLeft: prevDates.length * 55 + this._scrollLeft
        })
        }

一瞬的禁用滑动，滑动惯性会停止，后恢复滑动效果，惯性禁止时足够准确的scrollLeft值获取（因为代码的执行速度比手动滑动的速度要快，获取的scrollLeft值变化不大）。

为什么不在设enable为false时直接更新scrollLeft？
因为scrollLeft是改变横向滚动条的位置
当enable为false时，不可滑动，scrollLeft无法设置。当恢复允许滑动
时才可更新scrollLeft。

这样可以实现像完全加载了所有数据一样的效果。
实际只初始化了页面显示的几个数据，左右拖动时不断生成新数据加到数组中显示在页面上。