目录

Sticky 组件

优质
小牛编辑
129浏览
2023-12-01

1.10.0 新增

吸附组件,当滚动位置到达目标元素位置后,目标元素就会自动吸附。

示例

  • 综合使用 - Scroll

    <cube-sticky :pos="scrollY">
      <cube-scroll
        :scroll-events="scrollEvents"
        @scroll="scrollHandler">
        <ul>
          <li>title</li>
        </ul>
        <cube-sticky-ele ele-key="11">
          <ul class="sticky-header">
            <li>111</li>
          </ul>
        </cube-sticky-ele>
        <ul>
          <li v-for="item in items">{{item}}</li>
        </ul>
        <cube-sticky-ele ele-key="22">
          <ul class="sticky-header">
            <li>222</li>
            <li>222</li>
          </ul>
        </cube-sticky-ele>
        <ul>
          <li v-for="item in items2">{{item}}</li>
        </ul>
        <cube-sticky-ele ele-key="33">
          <ul class="sticky-header">
            <li>333</li>
          </ul>
        </cube-sticky-ele>
        <ul>
          <li v-for="item in items3">{{item}}</li>
        </ul>
      </cube-scroll>
      <template slot="fixed" slot-scope="props">
        <ul class="sticky-header">
          <li>{{props.current}}</li>
        </ul>
      </template>
    </cube-sticky>
    
    const _data = [
      '