Uniapp scrollview(十五)

scrollview 下拉刷新和上拉加载

• 使用 scroll-view 标签充当分页容器

• 绑定滚动条触底事件 scrolltolower

• 实现分页逻辑

第一步标签以及设置高度以及标签

• scrollview

• scrollview 设置的时候必须要减去头部的高度

• 底部切换导航不用考虑,小程序已经自动减去了

    <scroll-view scroll-y
                 class="scrollheight"
                 @scrolltolower="handleToLower"
                 :refresher-enabled="true"
                 :refresher-threshold="80"
                 refresher-default-style="none"
                 refresher-background="lightgreen"
                 :refresher-triggered="triggered"
                 @refresherpulling="onPulling"
                 @refresherrefresh="onRefresh"
                 @refresherrestore="onRestore"
                 @refresherabort="onAbort">
      <!--下拉刷新的卡槽开始-->
      <view slot="refresher"
            v-if="triggered"
            class="refresh-container"
            style="display: block; width: 100%; height: 80px; background: red; display: flex; align-items: center;">
        <view class="view1"
              style="position: absolute; text-align: center; width: 100%;">
          下拉刷新
        </view>
      </view>

      <!--下拉刷新的卡槽结束-->

      <view class="viewcontent">

      </view>
    </scroll-view>

• css

<style lang="scss" scoped>
  .scrollheight {
    //height: 屏幕的高度 - 头部标题的高度
    height: calc(100vh - xxxpx);
  }
</style>

事件

• 所有的事件

  methods: {
    handleToLower () {
      console.log('底部开始加载')
    },
    onPulling (e) {
      console.log('onPulling:', e)
    },

    onRefresh () {
      let _this = this;
      _this.triggered = true;
      console.log('执行了')
      console.log(_this.triggered)
      setTimeout(() => {
        _this.triggered = false;
      }, 3000)
    },

    onRestore (e) {
      console.log('onRestore:', e)
    },

    onAbort (e) {
      console.log('onAbort', e)
    },
  },