更新记录

1.0.0（2025-06-25）

首次上线

平台兼容性

uni-app(4.03)

uni-app x(4.03)

其他

<template>
  <view>
    <!-- 引入下拉刷新和上拉加载组件 -->
    <pull-load-refresh 
      :marginTop="'39px'" 
      :showScrollerBar="true" 
      :dataListLength="dataListSize" 
      :total="total"
      @pullToLoad="pullToLoad" 
      @onRefresh="pullDownRefresh" 
      @pageNum="queryParams.pageNum">

      <!-- 列表内容区域 -->
      <template #list>
        <view class="data-li" v-for="(item,index) in dataList" :key="index" v-text="item"></view>
      </template>

      <!-- 底部提示区域 -->
      <template #bottom>
        <view class="bottom-li">没有更多了...</view>
      </template>
    </pull-load-refresh>
  </view>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import pullLoadRefresh from '@/components/pull-load-refresh/index.vue';

// 初始化查询参数
const queryParams = ref({
pageNum: 1,
pageSize: 10
})

// 初始化数据列表
const dataList = ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
const total = ref(100);
const dataListSize = ref(0);

// 获取数据列表方法
const getDataList = () => {
//模拟数据加载
if (dataList.value.length < total.value) {
const dLength = queryParams.value.pageNum \* 10;
for (let i = dataList.value.length + 1; i <= dLength; i++) {
dataList.value.push(i);
}
dataListSize.value = dLength;
uni.hideLoading();
} else {
dataListSize.value = dataList.value.length
uni.hideLoading();
}
};

// 上拉加载处理函数
const pullToLoad = (e) => {
if (e) {
uni.showLoading({ mask: true, icon: "none" })
queryParams.value.pageNum++;
setTimeout(() => {
getDataList();
}, 1000);
}
};

// 下拉刷新处理函数
const pullDownRefresh = (e) => {
if (e) {
uni.showLoading({ mask: true, icon: "none" })
queryParams.value.pageNum = 1;
setTimeout(() => {
getDataList();
}, 1000);
}
};

<script>
<style scoped>
.data-li {
  width: 98%;
  height: 6rem;
  border: 2rpx solid #aa55ff;
  margin: 10rpx auto 0 auto;
  border-radius: 1rem;
  text-align: center;
  line-height: 6rem;
  font-size: 16px;
  font-weight: 550;
  color: #aa55ff;
  font-family: "宋体";
}

.bottom-li {
  width: 98%;
  height: 2rem;
  margin: 10rpx auto 0 auto;
  text-align: center;
  line-height: 2rem;
  font-size: 14px;
  font-weight: 550;
  color: #afafaf;
  font-family: "宋体";
}
</style>