EveryLike/pages/component/scroll-view/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" style="padding-top: 16px;" :showScrollbar="true">
      <view class="uni-list-cell-padding">
        <text class="refresher-tips">**下拉刷新的属性设置需要先打开下拉刷新开关**</text>
      </view>
      <view class="uni-list-cell uni-list-cell-padding">
        <text>是否开启下拉刷新</text>
        <switch :checked="refresherEnabled" @change="handleTrunOnRefresher"></switch>
      </view>
      <view class="uni-list-cell uni-list-cell-padding">
        <text>设置下拉刷新状态</text>
        <switch :disabled="!refresherEnabled" :checked="refresherTriggered"
          @change="refresherTriggered=!refresherTriggered"></switch>
      </view>

      <view class="uni-list-cell uni-list-cell-padding">
        <text>设置下拉刷新阈值</text>
        <input class="uni-list-cell-input" :disabled="!refresherEnabled" :value="refresherThreshold" type="number"
          @input="handleRefresherThresholdInput" />
      </view>

      <view class="uni-list-cell uni-list-cell-padding">
        <text>设置下拉刷新区域背景颜色</text>
        <input class="uni-list-cell-input" :disabled="!refresherEnabled" :value="refresherBackground"
          @input="handleRefresherBackground" />
      </view>

      <view class="uni-list-cell-padding">
        <text>设置下拉刷新默认样式</text>
        <view class="switch-refresher-group">
          <button class="switch-refresher-style" type="primary" size="mini"
            @click="refresherDefaultStyle = `none`">none</button>
          <button class="switch-refresher-style" type="primary" size="mini"
            @click="refresherDefaultStyle = `black`">black</button>
          <button class="switch-refresher-style" type="primary" size="mini"
            @click="refresherDefaultStyle = `white`">white</button>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

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

  export default {
    data() {
      return {
        items: [] as Item[],
        refresherEnabled: true,
        refresherTriggered: false,
        refresherThreshold: 45,
        refresherDefaultStyle: "black",
        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: 0 25px 25px 25px;
  }

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

  .refresher-tips {
    font-size: 12px;
    text-align: center;
    color: red;
  }

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

  .uni-list {
    flex: 1;
  }

  .uni-list-cell-input {
    max-width: 100px;
    border: 1px solid #ccc;
    text-align: center;
  }

  .switch-refresher-group {
    flex-direction: row;
    margin-top: 5px;
  }

  .switch-refresher-style {
    padding: 2px 10px;
    margin-right: 5px;
  }
</style>