scroll-view-refresher-props.uvue

<template>
  <view class="page-scroll-view">
    <page-head title="下拉刷新的scroll-view属性示例"></page-head>
    <view class="uni-margin-wrap">
      <scroll-view direction="vertical" :refresher-enabled="refresherEnabled" :refresher-threshold="refresherThreshold"
        :refresher-default-style="refresherDefaultStyle" :refresher-background="refresherBackground"
        :refresher-triggered="refresherTriggered" @refresherpulling="refresherpulling"
        @refresherrefresh="refresherrefresh" @refresherrestore="refresherrestore" @refresherabort="refresherabort"
        style="width: 100%;height: 100%;">
        <view class="item" :id="item.id" v-for="(item,_) in items">
          <text class="uni-text">{{item.label}}</text>
        </view>
      </scroll-view>
    </view>

    <scroll-view class="uni-list" showScrollbar="true">
      <view class="uni-common-pb"></view>
      <text style="font-size: 12px;text-align: center;color: red; ">**下拉刷新的属性设置需要先打开下拉刷新开关**</text>
      <view class="uni-common-pb"></view>
      <view class="uni-option">
        <text>是否开启下拉刷新</text>
        <switch :checked="refresherEnabled" @change="handleTrunOnRefresher"></switch>
      </view>
      <view class="uni-option">
        <text>设置下拉刷新状态</text>
        <switch :disabled="!refresherEnabled" :checked="refresherTriggered"
          @change="refresherTriggered=!refresherTriggered"></switch>
      </view>

      <view class="uni-option">
        <text>设置下拉刷新阈值</text>
        <input style="width: 50px;border-width: 1px;text-align: center;  border-style: solid;"
          :disabled="!refresherEnabled" :value="refresherThreshold" type="number"
          @input="handleRefresherThresholdInput" />
      </view>

      <view class="uni-option">
        <text>设置下拉刷新区域背景颜色</text>
        <input style="width: 100px;border-width: 1px;text-align: center; border-style: solid;"
          :disabled="!refresherEnabled" :value="refresherBackground" @input="handleRefresherBackground" />
      </view>

      <view style="height: 100px;padding: 10px; ">
        <text>设置下拉刷新默认样式</text>
        <view class="uni-common-pb"></view>
        <view style="flex-direction: row;">
          <button style="padding: 5rpx; margin-right: 5px;" type="primary" size="mini"
            @click="refresherDefaultStyle = `none`">none</button>
          <button style="padding: 5rpx; margin-right: 10rpx; " type="primary" size="mini"
            @click="refresherDefaultStyle = `black`">black</button>
          <button style="padding: 5rpx;" type="primary" size="mini"
            @click="refresherDefaultStyle = `white`">white</button>
        </view>
      </view>

      <view class="uni-common-pb"></view>
    </scroll-view>

  </view>
</template>

<script>
  type Item = {
    id : string,
    label : string,
  }

  export default {
    data() {
      return {
        items: [] as Item[],
        refresherEnabled: false,
        refresherTriggered: false,
        refresherThreshold: 45,
        refresherDefaultStyle: "white",
        refresherBackground: "transparent",
      }
    },
    onLoad() {
      for (let i = 0; i < 10; i++) {
        const item = {
          id: "item" + i,
          label: "item" + i,
        } as Item;
        this.items.push(item);
      }
    },
    methods: {
      handleTrunOnRefresher() {
        this.refresherTriggered = false;
        //不能同时关闭下拉状态和关闭下拉刷新。
        setTimeout(() => {
          this.refresherEnabled = !this.refresherEnabled;
        }, 0)
      },
      handleRefresherThresholdInput(e : InputEvent) {
        const value = e.detail.value;
        if (value == "") {
          this.refresherThreshold = 45;
        } else {
          this.refresherThreshold = parseInt(e.detail.value);
        }
      },
      handleRefresherBackground(e : InputEvent) {
        const value = e.detail.value;
        this.refresherBackground = value;
      },
      //响应事件
      refresherpulling() {
        console.log("下拉刷新控件被下拉");
      },
      refresherrefresh() {
        console.log("下拉刷新被触发");
        this.refresherTriggered = true;
        //不能同时关闭下拉状态和关闭下拉刷新。
        setTimeout(() => {
          this.refresherTriggered = false;
        }, 1500)
      },
      refresherrestore() {
        console.log("下拉刷新被复位");
      },
      refresherabort() {
        console.log("下拉刷新被中止");
      }
    }
  }
</script>

<style>
  .uni-margin-wrap {
    height: 200px;
    margin-left: 25px;
    margin-right: 25px;
  }

  .item {
    justify-content: center;
    align-items: center;
    height: 200px;
    width: 100%;
    background-color: azure;
    border-width: 1px;
    border-style: solid;
    border-color: chocolate;
  }

  .uni-text {
    color: black;
    font-size: 50px;
  }

  .uni-list {
    flex: 1;
    margin: 25px 25px 0 25px;
  }

  .uni-option {
    height: 50px;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
  }

  .picker-view {
    width: 100%;
    height: 320px;
    margin-top: 10px;
  }
</style>