OmniCard/mpuniapp/pages/component/scroll-view/scroll-view-refresher-props.uvue

<template>
  <!-- #ifdef APP -->
  <view class="page-scroll-view">
  <!-- #endif -->
    <page-head title="下拉刷新的scroll-view属性示例"></page-head>
    <view class="uni-margin-wrap">
      <scroll-view id="refresher-scroll-view" direction="vertical" :bounces="bounces" :refresher-enabled="refresherEnabled" :refresher-threshold="refresherThreshold"
        :refresher-default-style="refresherDefaultStyle" :refresher-background="refresherBackground"
        <!-- #ifdef APP-ANDROID && VUE3-VAPOR -->
        :android-overscroll="androidOverscroll"
        <!-- #endif -->
        :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;">
      <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>
        <switch :checked="bounces" @change="handleBouncesChange"></switch>
      </view>

      <!-- #ifdef APP-ANDROID && VUE3-VAPOR -->
      <view class="uni-list-cell uni-list-cell-padding">
        <text>是否开启弹簧回弹效果</text>
        <switch :checked="androidOverscroll" @change="handleAndroidOverscrollChange"></switch>
      </view>
      <!-- #endif -->

      <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-padding">
        <text>设置下拉刷新区域背景颜色</text>
        <text class="refresher-background-value">当前值：{{ refresherBackground }}</text>
        <radio-group class="refresher-background-group" @change="handleRefresherBackgroundChange">
          <radio v-for="(option, _) in refresherBackgroundOptions" class="refresher-background-radio"
            :value="option.value" :checked="refresherBackground == option.value" :disabled="!refresherEnabled">{{ option.label }}</radio>
        </radio-group>
      </view>

      <view class="uni-list-cell-padding">
        <text>设置下拉刷新默认样式</text>
        <text class="refresher-background-value">当前值：{{ refresherDefaultStyle }}</text>
        <radio-group class="refresher-background-group" @change="handleRefresherDefaultStyleChange">
          <radio v-for="(option, _) in refresherStyleOptions" class="refresher-background-radio"
            :value="option.value" :checked="refresherDefaultStyle == option.value" :disabled="!refresherEnabled">{{ option.label }}</radio>
        </radio-group>
      </view>
    </scroll-view>
  <!-- #ifdef APP -->
  </view>
  <!-- #endif -->
</template>

<script setup lang="uts">


  type Item = {
    id : string,
    label : string,
  }

  type RefresherBackgroundOption = {
    label : string,
    value : string,
  }

  type RefresherStyleOption = {
    label : string,
    value : string,
  }

  const items = ref<Item[]>([])
  const bounces = ref(true)
  const refresherEnabled = ref(true)
  const refresherTriggered = ref(false)
  const androidOverscroll = ref(false)
  const refresherRefreshCount = ref(0)
  const refresherThreshold = ref(45)
  const refresherDefaultStyle = ref("black")
  const refresherBackground = ref("transparent")
  const refresherBackgroundOptions : RefresherBackgroundOption[] = [
    {
      label: "透明",
      value: "transparent"
    },
    {
      label: "白色",
      value: "#ffffff"
    },
    {
      label: "灰色",
      value: "#8f8f8f"
    },
    {
      label: "蓝色",
      value: "#0000ff"
    }
  ]
  const refresherStyleOptions : RefresherStyleOption[] = [
    {
      label: "none",
      value: "none"
    },
    {
      label: "black",
      value: "black"
    },
    {
      label: "white",
      value: "white"
    }
  ]

  onLoad(() => {
    for (let i = 0; i < 10; i++) {
      const item : Item = {
        id: "item" + i,
        label: "item" + i,
      }
      items.value.push(item);
    }
  })

  function handleTrunOnRefresher() {
    refresherTriggered.value = false;
    //不能同时关闭下拉状态和关闭下拉刷新。
    setTimeout(() => {
      refresherEnabled.value = !refresherEnabled.value;
    }, 0)
  }

  function handleRefresherThresholdInput(e : InputEvent) {
    const value = e.detail.value;
    if (value == "") {
      refresherThreshold.value = 45;
    } else {
      refresherThreshold.value = parseInt(e.detail.value);
    }
  }

  function handleAndroidOverscrollChange() {
    androidOverscroll.value = !androidOverscroll.value;
  }

  function handleBouncesChange() {
    bounces.value = !bounces.value
  }

  function handleRefresherBackgroundChange(event : UniRadioGroupChangeEvent) {
    refresherBackground.value = event.detail.value;
  }

  function handleRefresherDefaultStyleChange(event : UniRadioGroupChangeEvent) {
    refresherDefaultStyle.value = event.detail.value;
  }

  //响应事件
  function refresherpulling() {
    console.log("下拉刷新控件被下拉");
  }

  function refresherrefresh() {
    console.log("下拉刷新被触发");
    refresherRefreshCount.value += 1
    refresherTriggered.value = true;
    //不能同时关闭下拉状态和关闭下拉刷新。
    setTimeout(() => {
      refresherTriggered.value = false;
    }, 1500)
  }

  function refresherrestore() {
    console.log("下拉刷新被复位");
  }

  function refresherabort() {
    console.log("下拉刷新被中止");
  }

  // 自动化测试专用
  function toggleAndroidOverscrollForTest() {
    handleAndroidOverscrollChange()
  }

  // 自动化测试专用
  function setAndroidOverscrollForTest(value : boolean) {
    androidOverscroll.value = value
  }

  // 自动化测试专用
  function setRefresherEnabledForTest(value : boolean) {
    refresherTriggered.value = false
    refresherEnabled.value = value
  }

  // 自动化测试专用
  function getAndroidOverscrollForTest() : boolean {
    return androidOverscroll.value
  }

  // 自动化测试专用
  function getRefresherRefreshCountForTest() : number {
    return refresherRefreshCount.value
  }

  // 自动化测试专用
  function getBoundingClientRectForTest() : DOMRect {
    return uni.getElementById('refresher-scroll-view')?.getBoundingClientRect()!
  }

  // 自动化测试专用
  function resetAndroidOverscrollForTest() {
    androidOverscroll.value = false
    refresherEnabled.value = true
    refresherTriggered.value = false
    refresherRefreshCount.value = 0
  }

  defineExpose({
    getBoundingClientRectForTest,
    getAndroidOverscrollForTest,
    getRefresherRefreshCountForTest,
    resetAndroidOverscrollForTest,
    setAndroidOverscrollForTest,
    setRefresherEnabledForTest,
    toggleAndroidOverscrollForTest,
  })
</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;
  }

  .refresher-background-value {
    margin-top: 8px;
    font-size: 12px;
    color: #666666;
  }

  .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;
  }

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

  .refresher-background-radio {
    margin-right: 12px;
    margin-bottom: 8px;
  }

</style>