更新记录

0.0.1（2024-11-27） 下载此版本

版本0.0.1 支持触底，触顶，下拉刷新，滚动到指定元素等功能

平台兼容性

Vue ScrollView 示例

这个 Vue 示例展示了如何使用 ScrollView 组件实现一个可滚动的列表，并包括了下拉刷新和上拉加载的功能。

代码实现

<template>
  <view style="position: relative;height: 50vh;background-color: red;">
    <ScrollView
      :scroll-x="true"
      :scroll-y="true"
      :refresh-trigger="true"
      @refresh="handleRefresh"
      @scroll="handleScroll"
      @scrolltolower="loadMore"
      @scrolltoupper="loadNewData"
    >
      <view class="content">
        <view v-for="item in items" :key="item.id" class="item">
          {{ item.content }}
        </view>
      </view>
    </ScrollView>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import ScrollView from '@/components/scrollView-zb/index.vue';

const items = ref([
  { id: 1, content: 'Item 1' },
  { id: 2, content: 'Item 2' },
  { id: 3, content: 'Item 3' },
  { id: 1, content: 'Item 1' },
  { id: 2, content: 'Item 2' },
  { id: 3, content: 'Item 3' },
  { id: 1, content: 'Item 1' },
  { id: 2, content: 'Item 2' },
  { id: 3, content: 'Item 3' },
  { id: 1, content: 'Item 1' },
]);

const refreshing = ref(false);

//滚动
const handleScroll = (e) => {
  // console.log('Scrolling...', e);
};

//触底
const loadMore = () => {
  console.log('Load more...');
  items.value.push({ id: items.value.length + 1, content: 'New Item' });
  items.value.push({ id: items.value.length + 1, content: 'New Item' });
  items.value.push({ id: items.value.length + 1, content: 'New Item' });
  items.value.push({ id: items.value.length + 1, content: 'New Item' });
  items.value.push({ id: items.value.length + 1, content: 'New Item' });
  items.value.push({ id: items.value.length + 1, content: 'New Item' });
  items.value.push({ id: items.value.length + 1, content: 'New Item' });
  items.value.push({ id: items.value.length + 1, content: 'New Item' });
  items.value.push({ id: items.value.length + 1, content: 'New Item' });
  items.value.push({ id: items.value.length + 1, content: 'New Item' });
  console.log(items.value.length);
  // 模拟加载更多数据
};

//触顶
const loadNewData = () => {
  console.log('Load new data...');
  // 这里可以调用刷新接口，模拟数据刷新
};

// 处理下拉刷新
const handleRefresh = () => {
  items.value.push({ id: items.value.length + 1, content: 'New Item' });
  items.value.push({ id: items.value.length + 1, content: 'New Item' });
  items.value.push({ id: items.value.length + 1, content: 'New Item' });
  items.value.push({ id: items.value.length + 1, content: 'New Item' });
  items.value.push({ id: items.value.length + 1, content: 'New Item' });
  items.value.push({ id: items.value.length + 1, content: 'New Item' });
  items.value.push({ id: items.value.length + 1, content: 'New Item' });
  items.value.push({ id: items.value.length + 1, content: 'New Item' });
  items.value.push({ id: items.value.length + 1, content: 'New Item' });
  items.value.push({ id: items.value.length + 1, content: 'New Item' });
  console.log(items.value.length);
};
</script>

<style scoped>
.content {
  padding: 20px;
}

.item {
  margin-bottom: 20px;
}
</style>