uni-app:mescroll-uniアップロード、ドロップダウンリフレッシュを実現

8146 ワード

前回scroll-viewを使用して実現したロードリフレッシュは体験が極めて悪い(ハハ);
今回のgetからmescroll-uniまではuniappプロジェクトではなく個人的な感覚で体験できるのは素晴らしいです
公式サイトの説明は非常に詳しいです.http://www.mescroll.com/uni.html#options
プルアップ:
uni-app:mescroll-uni 实现上拉加载,下拉刷新_第1张图片
uni-app:mescroll-uni 实现上拉加载,下拉刷新_第2张图片
ドロップダウン:
uni-app:mescroll-uni 实现上拉加载,下拉刷新_第3张图片
uni-app:mescroll-uni 实现上拉加载,下拉刷新_第4张图片
コンポーネントを先に導入するか:
import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue";
export default {         components:{             MescrollUni         },
}
uni-APPのプラグイン市場で直接ダウンロード導入https://ext.dcloud.net.cn/plugin?id=343
遍歴データ
 
パラメータ公式サイトには詳細があります.http://www.mescroll.com/uni.html#options  
個人コードリファレンス:


	import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue";
	export default {
		components:{
			MescrollUni
		},
		data() {
			return {
				loading:'',
				text:'  ',
				isShowNoMore:false,
				upOption:{
					textNoMore:'       >_<'  
				},
				list:[
					{
						payment:'   ',
						number:2,
						title:'    ',
						price:16,
						time:'2019-06-16  12.10',
						img:'../../../static/img/timg.jpg'
					},
					{
						payment:'   ',
						number:2,
						title:'    ',
						price:15,
						time:'2019-06-16  15.10',
						img:'../../../static/img/timg.jpg'
					},
					{
						payment:'   ',
						number:3,
						title:'    ',
						price:15,
						time:'2019-06-16  12.05',
						img:'../../../static/img/timg.jpg'
					},
					{
						payment:'   ',
						number:1,
						title:'    ',
						price:19,
						time:'2019-06-16  12.18',
						img:'../../../static/img/timg.jpg'
					},
					{
						payment:'   ',
						number:2,
						title:'     ',
						price:17,
						time:'2019-06-16  12.10',
						img:'../../../static/img/timg.jpg'
					},
					{
						payment:'   ',
						number:2,
						title:'     ',
						price:17,
						time:'2019-06-16  12.10',
						img:'../../../static/img/timg.jpg'
					}
					
				]
			};
		},
		onLoad(option) {
			
		},
		onPageScroll(e){
			
		},
		methods: {
		//        
			//        ,       : 
			//----- - http://www.mescroll.com/uni.html#tagUpCallback   ----------------------
			
			// mescroll        ,    mescroll  
			mescrollInit(mescroll) {
				console.log(mescroll)
				// this.mescroll = mescroll;
			},
			//     
			downCallback(mescroll){
				//              ,         
				// loadSwiper();
				//        ,               (     mescroll.num=1,    upCallback   )
				// mescroll.resetUpScroll()
				
				setTimeout(()=>{
					console.log(666);
					//         
					mescroll.endErr()
				},1000)
			},
			//     
			upCallback(mescroll){
				setTimeout(()=>{
					console.log(6655,"  ");
//           isShowNoMore=true,        ; isShowNoMore=false,       ; isShowNoMore=null,       
					if(this.list.length <= 20){
						for(var i = 0; i < 10; i++){
							var obj = {
								payment:'   ',
								number:2,
								title:'    ',
								price:16,
								time:'2019-06-16  12.10',
								img:'../../../static/img/timg.jpg'
							};
							this.list.push(obj);
						}
						console.log(this.list);
						this.isShowNoMore = false;
						mescroll.endUpScroll(this.isShowNoMore); 
					}else {
						this.isShowNoMore = true;
						mescroll.endUpScroll(this.isShowNoMore); 
					}
				},1000)
			},
			onReachBottom(){
				
			},
			
			allorders(){
				this.text = '  '
			},
			waitorders(){
				this.text = '   '
			},
			alreadyorders(){
				this.text = '   '
			},
			refundorders(){
				this.text = '  '
			}
		},
		
	}