scroll-view无限滚动并且点击居中

实现 scroll-view 的无限滚动并且点击居中可以通过以下步骤：

1. 在 scroll-view 中创建一个宽度为所有子元素宽度之和的容器，在容器中使用 flex 布局来排列子元素。
2. 复制一份子元素列表，将其排列在原列表的后面。
3. 监听 scroll-view 的 scroll 事件，当滚动到最后一个子元素之后，将容器中的子元素列表重置为原列表，然后重新排列子元素。
4. 监听子元素的点击事件，获取被点击的子元素的索引，计算出容器需要滚动的距离，然后使用 scroll-view 的 scrollIntoView 方法将被点击的子元素滚动到居中位置。

以下是一个简单的示例代码：

<scroll-view scroll-x style="white-space: nowrap;" bindscroll="onScroll">
  <view wx:for="{{items}}" wx:key="{{index}}" data-index="{{index}}" bindtap="onClick">{{item}}</view>
</scroll-view>

Page({
  data: {
    items: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
    containerWidth: 0,
    itemWidth: 0,
    currentIndex: 0
  },
  onLoad: function () {
    wx.createSelectorQuery().in(this).select('.container').boundingClientRect(res => {
      this.setData({
        containerWidth: res.width
      })
    }).exec()
    wx.createSelectorQuery().in(this).select('.item').boundingClientRect(res => {
      this.setData({
        itemWidth: res.width
      })
    }).exec()
  },
  onScroll: function (event) {
    const { scrollLeft } = event.detail
    const { containerWidth, itemWidth, items } = this.data
    const maxScrollLeft = (items.length * itemWidth) - containerWidth
    if (scrollLeft >= maxScrollLeft) {
      this.setData({
        items: [...items, ...items]
      })
    }
  },
  onClick: function (event) {
    const { index } = event.currentTarget.dataset
    this.setData({
      currentIndex: index
    })
    wx.createSelectorQuery().in(this).select(`.item[data-index="${index}"]`).boundingClientRect(res => {
      const { containerWidth } = this.data
      const itemLeft = res.left
      const itemWidth = res.width
      const itemCenter = itemLeft + (itemWidth / 2)
      const scrollLeft = itemCenter - (containerWidth / 2)
      wx.pageScrollTo({
        scrollLeft,
        duration: 300
      })
    }).exec()
  }
})

在这个示例中，我们先获取容器和子元素的宽度，然后在 scroll 事件中判断是否需要重置并重新排列子元素。在点击事件中，我们获取被点击的子元素的位置，然后计算出需要滚动的距离，最后使用 pageScrollTo 方法将 scroll-view 滚动到居中位置。