uniapp的页面和组件的下拉刷新

谁践踏了优雅 2021-07-26 00:31 919阅读 0赞

组件的下拉刷新

<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>

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

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: () => { }
     });
     }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p0cHl0aG9uNjY2_size_16_color_FFFFFF_t_70]: /images/20210725/9eff731587fe4d15b4c66d8c32dc3f61.png