uniapp的页面和组件的下拉刷新_tn-scroll-list-优快云博客

本文链接：https://blog.youkuaiyun.com/jtpython666/article/details/116458014

这是一个关于Vue.js组件实现下拉刷新和加载更多的示例代码。通过`<scroll-view>`组件，结合`uni-list`和`uni-load-more`，实现了数据的分页加载和下拉时的数据刷新功能。利用`uni.request`进行网络请求，更新数据列表。同时，提供了页面的`onPullDownRefresh`方法以支持微信小程序的下拉刷新事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

组件的下拉刷新

<template>
	  <scroll-view 
	  :refresher-triggered="refreshing"
	  :refresher-enabled="true" 
	  @refresherrefresh="onRefresh"
	  @scrolltolower="loadmore" v-if="data" :scroll-y="true" :style="{height:wh-40+'px'}">
	  	<uni-list>
	  		<uni-list-item v-for="(item,index) in data.data" :key="index" title="" note="">
	  			<image style="width: 200rpx;height: 200rpx;min-width: 200rpx;margin-right: 20px;" slot="header" :src="'http://101.96.128.94:9999/'+item.pic" mode=""></image>
	  			<view slot="body" style="margin-top: 10px; display: flex;flex-direction: column;align-items: space-around;">
	  				<text class="title">{{item.title}}</text>
	  				<text class="price">${{item.price}}</text>
	  			</view>
	  		</uni-list-item>
	  	</uni-list>
		<uni-load-more :status="more"></uni-load-more>
	  </scroll-view>
</template>

<script>


export default {
  name: '',
  data () {
    return {
	  more:'more',
      data:null,
	  wh:uni.getSystemInfoSync().windowHeight,
	  refreshing:false
    }
  },
  mounted() {
  	this.getData()
  },
  methods:{
	  onRefresh(){
		  if(this.refreshing==true)return
		  this.refreshing=true
		  uni.request({
		  	url:'http://101.96.128.94:9999/data/product/list.php',
			method:"GET",
			data:{pno:1},
			success: (res) => {
				console.log(res)
				this.data=res.data;
				this.refreshing=false
			}
		  })
	  },
	  loadmore(){
		  const {pno,pageCount}=this.data
		  if(pno==pageCount)return                           
		  this.more="loading"
		  uni.request({
		  	url:'http://101.96.128.94:9999/data/product/list.php',
			method:'GET',
			data:{pno:this.data.pno+1},
			success:(res)=>{
				// console.log(res)
				res.data.data=this.data.data.concat(res.data.data)
				this.data=res.data
				const {pno,pageCount}=this.data
				this.more=pno==pageCount?"noMore":"more"
			}
		  })
	  },
     getData(){
		 uni.request({
		 	url:'http://101.96.128.94:9999/data/product/list.php',
			method:"GET",
			data:{pno:1},
			success: (res) => {
				// console.log(res)
				this.data=res.data
			}
		 })
	 }
  }
}
</script>

<style  scoped>
  .price{
	  	color: red;
	  	font-size: 1.2em;
  }
  .title{
	  	text-overflow: -o-ellipsis-lastline;
	  	overflow: hidden;
	  	text-overflow: ellipsis;
	  	display: -webkit-box;
	  	-webkit-line-clamp: 2;
	  	line-clamp: 2;
	  	-webkit-box-orient: vertical;
  }
</style>

页面的下拉刷新
在这里插入图片描述

onPullDownRefresh() {
 // 下拉刷新 触发
 // 需要 在 pages.json 中, 配置当前页面的 下拉刷新为 真
 uni.request({
 url: 'http://101.96.128.94:9999/data/product/list.php',
 method: 'GET',
 data: { pno: 1 },
 success: res => {
 console.log(res);
 this.data = res.data; //新数据 覆盖 旧数据
 // 必须 在 pages.json 中 开启页面的 下拉刷新功能
 uni.stopPullDownRefresh();
 },
 fail: () => {},
 complete: () => {}
 });
 }