@mpxjs/webpack-plugin 2.10.17 → 2.10.18-beta.2

package/lib/runtime/components/ali/mpx-section-list.mpx

@@ -0,0 +1,566 @@
+<template>
+  <view class="mpx-section-list">
+    <scroll-view
+      id="scrollViewContainer"
+      class="scroll-view-container"
+      wx:ref="mpxRecycleView"
+      scroll-y="{{true}}"
+      scroll-top="{{scrollTop}}"
+      enhanced="{{enhanced}}"
+      scroll-with-animation="{{scrollWithAnimation}}"
+      scroll-animation-duration="{{scrollAnimationDuration}}"
+      refresher-enabled="{{refresherEnabled}}"
+      refresher-triggered="{{refresherTriggered}}"
+      bindscroll="onScroll"
+      bindscrolltolower="onScrolltolower"
+      bindrefresherrefresh="onRefresherrefresh"
+      wx:style="{{scrollViewStyle}}"
+    >
+      <view class="content-wrapper">
+        <block wx:if="{{useListHeader}}">
+          <list-header listHeaderData="{{listHeaderData}}"></list-header>
+        </block>
+        <view
+          class="infinite-list-placeholder"
+          ref="infinitePlaceholder"
+          wx:style="{{placeholderStyle}}"
+        ></view>
+        <view class="infinite-list" ref="infiniteList" wx:style="{{infiniteListStyle}}">
+          <block wx:for="{{visibleData}}">
+            <section-header
+              wx:if="{{item.itemData && item.itemData.isSectionHeader}}"
+              wx:key="header{{item.itemData.item_key || item._index}}"
+              itemData="{{item.itemData}}"
+            />
+            <recycle-item
+              wx:if="{{item.itemData && !item.itemData.isSectionHeader}}"
+              wx:key="item{{item.itemData.item_key || item._index}}"
+              itemData="{{item.itemData}}"
+            />
+          </block>
+        </view>
+        <block wx:if="{{useListFooter}}">
+          <list-footer listFooterData="{{listFooterData}}"></list-footer>
+        </block>
+      </view>
+      <block
+        wx:if="{{ _stickyHeaders &&
+          _stickyHeaders.length &&
+          positions.length && 
+          enableSticky
+        }}"
+      >
+        <sticky-header
+          scroll-view-id="scrollViewContainer"
+          sticky-id="mpx-sticky-header-{{index}}"
+          wx:ref="stickyHeader"
+          class="sticky-section"
+          wx:style="top: {{(positions[stickyItem._index] && positions[stickyItem._index].top) || 0}}px"
+          wx:for="{{_stickyHeaders}}"
+          wx:for-item="stickyItem"
+          wx:key="_index"
+          enable-polling="{{enablePolling}}"
+          polling-duration="{{pollingDuration}}"
+        >
+          <section-header
+            wx:key="{{'header' + stickyItem._index}}"
+            itemData="{{stickyItem.itemData}}"
+          />
+        </sticky-header>
+      </block>
+    </scroll-view>
+  </view>
+</template>
+
+<script>
+  import mpx, { createComponent } from '@mpxjs/core'
+  createComponent({
+    properties: {
+      width: String | Number,
+      height: String | Number,
+      listData: {
+        type: Array,
+        value: () => {
+          return []
+        }
+      },
+      scrollOptions: {
+        type: Object,
+        value: () => {
+          return {}
+        }
+      },
+      minRenderCount: {
+        type: Number,
+        value: 10
+      },
+      bufferScale: {
+        type: Number,
+        value: 1
+      },
+      itemHeight: {
+        type: Object,
+        value: () => {
+          return {}
+        }
+      },
+      listHeaderHeight: {
+        type: Object,
+        value: () => {
+          return {}
+        }
+      },
+      sectionHeaderHeight: {
+        type: Object,
+        value: () => {
+          return {}
+        }
+      },
+      listHeaderData: {
+        type: Object,
+        value: () => {
+          return {}
+        }
+      },
+      enhanced: {
+        type: Boolean,
+        value: false
+      },
+      refresherEnabled: {
+        type: Boolean,
+        value: false
+      },
+      refresherTriggered: {
+        type: Boolean,
+        value: false
+      },
+      enableSticky: {
+        type: Boolean,
+        value: false
+      },
+      scrollWithAnimation: {
+        type: Boolean,
+        value: false
+      },
+      scrollAnimationDuration: {
+        type: Number,
+        value: 300
+      },
+      enablePolling: {
+        type: Boolean,
+        value: false
+      },
+      pollingDuration: {
+        type: Number,
+        value: 3000
+      },
+      useListHeader: {
+        type: Boolean,
+        value: false
+      },
+      listFooterData: {
+        type: Object,
+        value: () => {
+          return {}
+        }
+      },
+      useListFooter: {
+        type: Boolean,
+        value: false
+      }
+    },
+    data: {
+      start: 0,
+      end: 0,
+      containerHeight: 0,
+      positions: [],
+      visibleCounts: [],
+      infiniteListStyle: '',
+      placeholderStyle: '',
+      scrollTop: 0
+    },
+    computed: {
+      _listData() {
+        return (this.listData && this.listData.map((item, index) => {
+          return {
+            itemData: item,
+            _index: `_${index}`
+          }
+        })) || []
+      },
+      _stickyHeaders() {
+        const data = []
+        this.listData && this.listData.forEach((item, index) => {
+          if (item.isSectionHeader) {
+            data.push({
+              itemData: item,
+              _index: index
+            })
+          }
+        })
+        return data
+      },
+      scrollViewStyle() {
+        return `height: ${this.formatDimension(
+          this.height
+        )};width: ${this.formatDimension(this.width)}`
+      },
+      visibleCount() {
+        if (!this.visibleCounts.length) return this.minRenderCount
+        return Math.max(this.visibleCounts[this.start], this.minRenderCount)
+      },
+      aboveCount() {
+        if (!this._listData.length || !this.visibleCounts.length) return 0
+        let count = 0
+        const startIndex = Math.max(0, this.start)
+        const endIndex = Math.max(0, startIndex - this.bufferScale)
+
+        for (let i = startIndex; i > endIndex; i--) {
+          count += this.visibleCounts[i] || 0
+        }
+
+        return count
+      },
+      belowCount() {
+        if (!this._listData.length || !this.visibleCounts.length) return 0
+        let count = 0
+        const startIndex = Math.min(this.start, this._listData.length - 1)
+        const endIndex = Math.min(startIndex + this.bufferScale, this._listData.length - 1)
+
+        for (let i = startIndex; i < endIndex; i++) {
+          count += this.visibleCounts[i] || 0
+        }
+
+        return count
+      },
+      visibleData() {
+        if (!this._listData.length) return []
+
+        const start = Math.min(Math.max(0, this.start - this.aboveCount), this._listData.length - 1)
+
+        let end = Math.min(this._listData.length, this.start + this.visibleCount + this.belowCount)
+
+        // 如果接近列表末尾，确保显示所有剩余项目
+        if (end > this._listData.length - 3) {
+          end = this._listData.length
+        }
+
+        return this._listData.slice(start, end).map((item, idx) => {
+          const realIndex = start + idx
+          return {
+            ...item,
+            _index: `_${realIndex}`
+          }
+        })
+      },
+      _listHeaderHeight() {
+        let listHeaderHeight = 0
+        if (this.useListHeader) {
+          listHeaderHeight = this.getItemHeight(this.listHeaderData, 0, 'listHeaderHeight') || 0
+        }
+        return listHeaderHeight
+      },
+      placeholderHeight() {
+        if (!this.positions.length) return 0
+        return this.positions[this.positions.length - 1].bottom - this._listHeaderHeight || 0
+      }
+    },
+    watch: {
+      listData: {
+        handler() {
+          this.initPositions()
+          this.setPlaceholderStyle()
+          // 更新真实偏移量
+          this.setStartOffset()
+        }
+      },
+      itemHeight: {
+        handler() {
+          this.initPositions()
+          this.setPlaceholderStyle()
+          this.setStartOffset()
+        },
+        deep: true
+      },
+      sectionHeaderHeight: {
+        handler() {
+          this.initPositions()
+          this.setPlaceholderStyle()
+          this.setStartOffset()
+        },
+        deep: true
+      },
+      listHeaderHeight: {
+        handler() {
+          this.initPositions()
+          this.setPlaceholderStyle()
+          this.setStartOffset()
+        },
+        deep: true
+      },
+      containerHeight() {
+        this.calculateVisibleCounts()
+      }
+    },
+    ready() {
+      this.initPositions()
+      this.getContainerHeight()
+      this.setPlaceholderStyle()
+      if (!this.positions || !this.positions.length) {
+        return
+      }
+      this.start = this.getStartIndex()
+      this.end = this.start + this.visibleCount
+      this.setStartOffset()
+    },
+    methods: {
+      getContainerHeight() {
+        mpx
+          .createSelectorQuery()
+          .select('#scrollViewContainer')
+          .boundingClientRect((rect) => {
+            if (!rect) return
+            this.containerHeight = rect.height
+          })
+          .exec()
+      },
+      formatDimension(value) {
+        return typeof value === 'number' ? `${value}px` : value || '100%'
+      },
+      setPlaceholderStyle() {
+        this.placeholderStyle = `height: ${this.placeholderHeight}px`
+      },
+      initPositions() {
+        let bottom = this._listHeaderHeight || 0
+        this.positions = this._listData.map((item, index) => {
+          const height = this.getItemHeight(
+            item.itemData,
+            index,
+            item.itemData.isSectionHeader ? 'sectionHeaderHeight' : 'itemHeight'
+          )
+          const position = {
+            index,
+            height: height,
+            top: bottom,
+            bottom: bottom + height
+          }
+          bottom = position.bottom
+          return position
+        })
+
+        if (this.containerHeight) {
+          this.calculateVisibleCounts()
+        }
+      },
+      calculateVisibleCounts() {
+        this.visibleCounts = this.positions.map((_, startIndex) => {
+          let count = 0
+          let totalHeight = 0
+
+          for (let i = startIndex; i < this.positions.length; i++) {
+            totalHeight += this.positions[i].height
+            if (totalHeight > this.containerHeight) {
+              break
+            }
+            count++
+          }
+
+          // 如果是最后几个项目，确保全部显示
+          if (startIndex + count > this.positions.length - 3) {
+            count = this.positions.length - startIndex
+          }
+
+          return count
+        })
+      },
+
+      getStartIndex(scrollTop = 0) {
+        // 确保不会返回超出范围的索引
+        if (!this.positions.length) {
+          return 0
+        }
+
+        // 如果滚动位置为0，直接返回0
+        if (scrollTop <= 0) {
+          return 0
+        }
+        const index = this.binarySearch(this.positions, scrollTop)
+        return Math.max(0, Math.min(index, this._listData.length - 1))
+      },
+      binarySearch(list, value) {
+        if (!list.length) return 0
+
+        // 如果 scrollTop 超过了最后一个元素的底部
+        if (value >= list[list.length - 1].bottom) {
+          return list.length - 1
+        }
+
+        let start = 0
+        let end = list.length - 1
+
+        while (start <= end) {
+          const midIndex = Math.floor((start + end) / 2)
+          const midValue = list[midIndex]
+
+          if (value >= midValue.top && value < midValue.bottom) {
+            return midIndex
+          }
+
+          if (value < midValue.top) {
+            end = midIndex - 1
+          } else {
+            start = midIndex + 1
+          }
+        }
+
+        return Math.min(Math.max(0, start - 1), list.length - 1)
+      },
+      setStartOffset() {
+        if (!this.positions.length) return
+        if (this.start >= 1) {
+          // 确保 startIndex 不会超出范围
+          const startIndex = Math.min(
+            Math.max(0, this.start - this.aboveCount),
+            this.positions.length - 1
+          )
+
+          const offset = this.positions[startIndex].top
+          this.infiniteListStyle = `transform: translateY(${offset}px)`
+        } else {
+          this.infiniteListStyle = `transform: translateY(${this.positions[0].top}px)`
+        }
+      },
+      getItemHeight(item, index, key) {
+        const { value, getter } = this[key]
+        if (typeof getter === 'function') {
+          return getter(item, index) || 0
+        } else {
+          return value || 0
+        }
+      },
+      onScroll(e) {
+        const { scrollTop } = e.detail
+        const newStart = this.getStartIndex(scrollTop)
+        // 只有当start发生足够变化时才更新，避免滚动触发重渲染
+        if (Math.abs(newStart - this.end) >= Math.floor(this.belowCount / 2)) {
+          this.start = newStart
+          this.end = this.start + this.visibleCount
+          this.setStartOffset()
+        }
+
+        this.triggerEvent('scroll', e)
+      },
+      onScrolltolower(e) {
+        this.triggerEvent('scrolltolower', e)
+      },
+      onRefresherrefresh(e) {
+        this.triggerEvent('refresherrefresh', e)
+      },
+      scrollToIndex({ index, viewPosition = 0, viewOffset = 0 }) {
+        const isStickyHeader = this._listData[index].itemData?.isSectionHeader
+        let prevHeaderHeight = 0
+        // 如果不是sticky header 查找最近一个吸顶的 sticky header
+        if (!isStickyHeader && this.enableSticky) {
+          for (let i = index - 1; i >= 0; i--) {
+            if (this._listData[i].itemData?.isSectionHeader) {
+              prevHeaderHeight = this.positions[i].height
+              break
+            }
+          }
+        }
+
+        const itemTop = (this.positions[index]?.top || 0) - prevHeaderHeight
+        const itemHeight = this.positions[index]?.height || 0
+        const containerHeight = this.containerHeight
+
+        let targetTop = itemTop
+        if (viewPosition === 1) {
+          // 滚动到可视区底部
+          targetTop = itemTop - (containerHeight - itemHeight)
+        } else if (viewPosition === 0.5) {
+          // 滚动到可视区中央
+          targetTop = itemTop - (containerHeight - itemHeight) / 2
+        }
+
+        targetTop -= viewOffset
+
+        // 如果 targetTop 为 0，触发不了支付宝滚动，所以需要加一个很小的值
+        if (targetTop <= 0) {
+          targetTop = 0.01
+        }
+
+        // 支付宝小程序不支持 animated 参数，也不支持 scrollTo 方法滚动
+        this.scrollTop = targetTop
+
+        setTimeout(() => {
+          this.refreshStickyHeader()
+        }, this.scrollAnimationDuration + 100)
+      },
+      refreshStickyHeader() {
+        if (!this.$refs.stickyHeader) return
+
+        this.$refs.stickyHeader.forEach((header) => {
+          if (header && header.refresh) {
+            header.refresh()
+          }
+        })
+      }
+    }
+  })
+</script>
+
+<style scoped>
+  .scroll-view-container {
+    position: relative;
+  }
+  .mpx-section-list {
+    position: relative;
+    overflow: hidden;
+  }
+
+  .content-wrapper {
+    position: relative;
+    width: 100%;
+  }
+
+  .infinite-list {
+    left: 0;
+    right: 0;
+    top: 0;
+    position: absolute;
+    will-change: transform;
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    /* 支付宝环境需要设置允许事件穿透, 否则滑不动 */
+    /* @mpx-if (__mpx_mode__ === 'ali') */
+    pointer-events: none;
+    /* @mpx-endif */
+  }
+  .sticky-section {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+  }
+</style>
+<script type="application/json">
+  {
+    "disableScroll": true,
+    "usingComponents": {
+      "sticky-header": "./mpx-sticky-header.mpx"
+    },
+    "componentGenerics": {
+      "recycle-item": {
+        "default": "../wx/mpx-section-list-default/list-item.mpx"
+      },
+      "section-header": {
+        "default": "../wx/mpx-section-list-default/section-header.mpx"
+      },
+      "list-header": {
+        "default": "../wx/mpx-section-list-default/list-header.mpx"
+      },
+      "list-footer": {
+        "default": "../wx/mpx-section-list-default/list-footer.mpx"
+      }
+    }
+  }
+</script>