uniapp电商app开启下拉刷新的方法（页面级及组件级）

页面开启下拉刷新

页面开启下拉刷新可以通过onPullDownRefresh这个页面级的下拉监听函数进行处理。
在 js 中定义 onPullDownRefresh 处理函数（和onLoad等生命周期函数同级），监听该页面用户下拉刷新事件。

需要在 pages.json 里，找到的当前页面的pages节点，并在 style 选项中开启 enablePullDownRefresh。
当处理完数据刷新后，uni.stopPullDownRefresh 可以停止当前页面的下拉刷新。

uni.startPullDownRefresh(OBJECT)
开始下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致
uni.stopPullDownRefresh()
停止当前页面下拉刷新。

示例

pages.json

{
    "pages": [
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "uni-app",
                "enablePullDownRefresh": true
            }
        }
    ],
    "globalStyle": {
        "navigationBarTextStyle": "white",
        "navigationBarBackgroundColor": "#0faeff",
        "backgroundColor": "#fbf9fe"
    }
}

index.vue

// 仅做示例，实际开发中延时根据需求来使用。
export default {
    data: {
        text: 'uni-app'
    },
    onLoad: function (options) {
        setTimeout(function () {
            console.log('start pulldown');
        }, 1000);
        uni.startPullDownRefresh();
    },
    onPullDownRefresh() {
        console.log('refresh');
        setTimeout(function () {
            uni.stopPullDownRefresh();
        }, 1000);
    }
}

组件级页面开启下拉刷新

可以在组件最外层view上添加监听touchstart touchend两个函数。

socrllTop(){
//此处的scrollDic是监听下拉开始到下拉结束手指移动的距离
	this.scrollDic = this.scrollY;
},
socrllTop2(){
//如果scrollY==0即代表页面回到顶部。如果scrollDic==0即代表页面是下拉后回到的顶部，这样可以排除下拉过程中会触发以下的函数。
	if(this.scrollDic == 0  && this.scrollY == 0){
		this.getAdvert();
		setTimeout(function () {
			// uni.showToast({
			// 	icon:'success',
			// 	title:'刷新成功'
			// })
			uni.stopPullDownRefresh();
		}, 1000);
	}				
}

此外，还需要监听页面滚动

watch: {
	scrollY() {
		//通知他妈的滚动了。
		this.setPageScroll(this.scrollY);
	},
	scrollBottom() {
		if(this.scrollBottom != 0) {
			//通知他妈的触底了
			this.setReachBottom();
		}
	}
}

scrollY可以在props中进行定义，这样可以通过父组件往子组件进行传值。

props: {
	show: {
		type: Boolean,
		default: true
	},
	scrollY: {
		type: Number,
		default: 0
	},
	scrollBottom: {
		type: Number,
		default: 0
	}
}