uniapp scroll-view滑到底部加载更多数据

官网

必须设置下面两个属性

1. scroll-y="true" 

2. height:90vh;

    //lowerBottom触底事件

   //list:展示的数据
    
        {{item.content}}
    	
    //bottomText底部文字
	
		{bottomText}}
	

data数据

list:[],   //展示的数据
//分页参数,跟后台协商参数
listQuery:{
    page:1,
    size:10,
},
//判断是否请求完毕数据
isBottom: false,
//底部文字
bottomText: '加载中...'

进入页面加载完请求第一页数据(onLoad)或者切入前台请求(onShow),根据需求修改,我这里是onLoad

onLoad(options) {

    this.listInit()
},
methods:{
    listInit(){
		this.listQuery.page = 1
		this.list = []
		this.isBottom = false
		this.bottomText = '加载中...'
		this.getList()
	},
    async getList(val) {
		let query = this.listQuery
        //请求数据 ,此为封装后的请求接口方法
		let list = await this.$request(‘接口地址’, 'get', query)
		this.list = this.list.concat(list.data.item)
        //判断是否请求完毕
		if (list.data.item.length < this.listQuery.size) {
			this.isBottom = true
			this.bottomText = '到底了~'
		}
	},
    // 滚到底部
	lowerBottom() {
		if (!this.isBottom) {
			this.listQuery.page += 1
			this.getList()
		}
	},
}

你可能感兴趣的:(uniapp,uni-app,微信小程序)