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

<template>
  <!-- <view class="page-scroll-view"> -->
    <page-head title="非下拉刷新的scroll-view属性示例"></page-head>
    <!-- 暂时分成两个方向不同的滚动视图，原因为：scroll-view组件不支持动态改变direction。 -->
    <scroll-view v-if="data.scrollX" direction="horizontal" :scroll-top="data.scrollTop" :scroll-left="data.scrollLeft"
      :upper-threshold="data.upperThreshold" :lower-threshold="data.lowerThreshold" :scroll-into-view="data.scrollIntoView"
      :enable-back-to-top="data.enableBackToTop" :scroll-with-animation="data.scrollWithAnimation" style="flex-direction: row;"
      class="uni-margin-wrap" :show-scrollbar="data.showScrollbar" :bounces="data.bounces" @scrolltoupper="scrolltoupper"
      @scrolltolower="scrolltolower" @scroll="scroll" @scrollend="scrollend" ref="scrollViewXRef" id="scrollViewX">
      <!-- h-margin-right末尾元素添加margin-right 测试bug #3866-->
      <view class="item" :id="'horizontal_'+item.id" v-for="(item,index) in data.items"
        :class="index==9 ? 'h-margin-right': ''">
        <view :id="'horizontal_grand_child__' + item.id"></view>
        <text class="uni-text">{{item.label}}</text>
      </view>
    </scroll-view>
    <scroll-view v-else direction="vertical" :scroll-top="data.scrollTop" :scroll-left="data.scrollLeft"
      :upper-threshold="data.upperThreshold" :lower-threshold="data.lowerThreshold" :scroll-into-view="data.scrollIntoView"
      :enable-back-to-top="data.enableBackToTop" :scroll-with-animation="data.scrollWithAnimation" :show-scrollbar="data.showScrollbar"
      :bounces="data.bounces" @scrolltoupper="scrolltoupper" @touchmove="onTouchMove" @scrolltolower="scrolltolower"
      @scroll="scroll" @scrollend="scrollend" ref="scrollViewYRef" id="scrollViewY" class="uni-margin-wrap">
      <!-- v-margin-bottom末尾元素添加margin-bottom 测试bug #3866-->
      <view class="item" :id="item.id" v-for="(item, index) in data.items" :class="index==9 ? 'v-margin-bottom': ''">
        <view :id="'grand_child_' + item.id"></view>
        <text class="uni-text">{{item.label}}</text>
      </view>
    </scroll-view>

    <scroll-view class="uni-list">
      <view class="uni-list-cell uni-list-cell-padding">
        <text>点击状态栏回到顶部（仅iOS）</text>
        <switch :checked="data.enableBackToTop" @change="data.enableBackToTop=!data.enableBackToTop"></switch>
      </view>
      <view class="uni-list-cell uni-list-cell-padding">
        <text>是否显示滚动条</text>
        <switch :checked="data.showScrollbar" @change="data.showScrollbar=!data.showScrollbar"></switch>
      </view>
      <view class="uni-list-cell uni-list-cell-padding">
        <text>是否有反弹效果</text>
        <switch :checked="data.bounces" @change="data.bounces=!data.bounces"></switch>
      </view>
      <view class="uni-list-cell uni-list-cell-padding">
        <text>是否开启滚动时使用动画过渡</text>
        <switch :checked="data.scrollWithAnimation" @change="data.scrollWithAnimation=!data.scrollWithAnimation"></switch>
      </view>
      <view class="uni-list-cell uni-list-cell-padding">
        <text>是否横向滚动</text>
        <switch :checked="data.scrollX" @change="changeDirectionX"></switch>
      </view>
      <view class="uni-list-cell uni-list-cell-padding">
        <text>是否竖向滚动</text>
        <switch :checked="data.scrollY" @change="changeDirectionY"></switch>
      </view>
      <view class="uni-slider uni-list-cell-padding">
        <text>拖动设置scroll-top</text>
      </view>
      <view class="uni-slider uni-list-cell-padding">
        <slider :max="1000" :min="0" :step="10" :value="data.scrollTop" :show-value="true" @change="handleChangeScrollTop" />
      </view>
      <view class="uni-slider uni-list-cell-padding">
        <text>拖动设置scroll-left</text>
      </view>
      <view class="uni-slider uni-list-cell-padding">
        <slider :max="1000" :min="0" :step="10" :value="data.scrollLeft" :show-value="true"
          @change="handleChangeScrollLeft" />
      </view>
      <view class="uni-list-cell uni-list-cell-padding">
        <text>设置触发scrolltoupper的距离</text>
        <input class="uni-list-cell-input" type="number" :value="data.upperThreshold" @input="handleUpperThresholdInput" />
      </view>
      <view class="uni-list-cell uni-list-cell-padding">
        <text>设置触发scrolltolower的距离</text>
        <input class="uni-list-cell-input" type="number" :value="data.lowerThreshold" @input="handleLowerThresholdInput" />
      </view>
      <view class="uni-list-cell uni-list-cell-padding">
        <button type="primary" class="button" @click="handleScrollIntoView">
          滚动到id为`item3`的子视图
        </button>
      </view>
      <view class="uni-list-cell uni-list-cell-padding">
      </view>
    </scroll-view>
  <!-- </view> -->
</template>

<script setup lang="uts">


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

type DataType = {
  items: Item[],
  scrollX: boolean,
  scrollY: boolean,
  bounces: boolean,
  scrollTop: number,
  scrollLeft: number,
  scrollChangeTop: number,
  scrollIntoView: string,
  enableBackToTop: boolean,
  scrollWithAnimation: boolean,
  showScrollbar: boolean,
  upperThreshold: number,
  lowerThreshold: number,
}

// 使用reactive包装数据，便于自动化测试获取
const data = reactive({
  items: [] as Item[],
  scrollX: false,
  scrollY: true,
  bounces: false,
  scrollTop: 0,
  scrollLeft: 0,
  scrollChangeTop: 0,
  scrollIntoView: "",
  enableBackToTop: false,
  scrollWithAnimation: false,
  showScrollbar: true,
  upperThreshold: 50,
  lowerThreshold: 50,
} as DataType)

const scrollViewXRef = ref<UniScrollViewElement | null>(null)
const scrollViewYRef = ref<UniScrollViewElement | null>(null)
// Methods
function handleChangeScrollLeft(e : UniSliderChangeEvent) {
  data.scrollLeft = e.detail.value
}

function handleChangeScrollTop(e : UniSliderChangeEvent) {
  data.scrollTop = e.detail.value
}

function changeDirectionX() {
  data.scrollX = !data.scrollX
  if (data.scrollX) {
    data.scrollY = false
  }
  data.scrollTop = 0
  data.scrollLeft = 0
}

function changeDirectionY() {
  data.scrollY = !data.scrollY
  if (data.scrollY) {
    data.scrollX = false
  }
  data.scrollTop = 0
  data.scrollLeft = 0
}

function handleScrollIntoView() {
  if (data.scrollX) {
    data.scrollIntoView = "horizontal_item3"
  } else {
    data.scrollIntoView = "item3"
  }
  setTimeout(() => {
    data.scrollIntoView = ""
  }, 0)
}

function handleUpperThresholdInput(e : InputEvent) {
  const value = e.detail.value
  if (value == "") {
    data.upperThreshold = 50
  } else {
    data.upperThreshold = parseInt(e.detail.value)
  }
}

function handleLowerThresholdInput(e : InputEvent) {
  const value = e.detail.value
  if (value == "") {
    data.lowerThreshold = 50
  } else {
    data.lowerThreshold = parseInt(e.detail.value)
  }
}

function scrolltoupper() {
  console.log("滚动到顶部")
}

function scrolltolower() {
  console.log("滚动到底部")
}

function scroll(e : ScrollEvent) {
  data.scrollChangeTop = e.detail.scrollTop
  console.log("scroll-top : " + e.detail.scrollTop + " scroll-left : " + e.detail.scrollLeft)
}

function scrollend() {
  console.log("滚动停止")
}

function onTouchMove() {
  console.log("TouchMove")
}

function checkScrollHeight() : Boolean {
  var element = scrollViewYRef.value
  if (element != null) {
    var scrollHeight = element.scrollHeight
    console.log("checkScrollHeight" + scrollHeight)
    if (scrollHeight > 1900) {
      return true
    }
  }
  return false
}

function checkScrollWidth() : Boolean {
  var element = scrollViewXRef.value
  if (element != null) {
    var scrollWidth = element.scrollWidth
    console.log("checkScrollWidth---" + scrollWidth)
    if (scrollWidth > 1900) {
      return true
    }
  }
  return false
}

// Lifecycle
onLoad((options : OnLoadOptions) => {
  for (let i = 0; i < 10; i++) {
    const item = {
      id: "item" + i,
      label: "item" + i,
    } as Item
    data.items.push(item)
  }
})

defineExpose({
  data,
  checkScrollHeight,
  checkScrollWidth
})
</script>

<style>
  .uni-margin-wrap {
    height: 250px;
    margin: 0 25px 25px 25px;
  }

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

  .uni-list {
    flex: 1;
  }

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

  .uni-slider {
    justify-content: center;
  }

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

  .button {
    flex: 1;
  }

  /*自动化测试专用*/
  .v-margin-bottom {
    margin-bottom: 50px;
  }

  /*自动化测试专用*/
  .h-margin-right {
    margin-right: 50px;
  }
</style>