如何使用uview中的loadmore上拉加载

普通用法

HTML 

<view>
    <view>
        <!-- 内容 -->
    </view>
    <u-loadmore :status="status" />
</view>

JS，onReachBottom这个是生命周期，和method同级

data() {
    return {
        goods:null,
        status: 'loadmore',//当前状态
		pageSize: 20,//获取多少条数据
		pageNum: 1//当前页码
    }    
}
onReachBottom() {
    let that= this;
    that.status = 'loading';
    that.pageNum = ++ that.pageNum;
    setTimeout(() => {
        that.goods_list()
    }, 600);
},
methods: {
    goods_list() {
        let that = this
        //写上自己的接口
        that.$http.https("GET", "/index/broadcast/broadcast_goods", {
		    'pageSize': that.pageSize,
			'pageNum': that.pageNum
		}).then(req => {
            if (req.data.code == 200) {
                //页面是1先重置
                if (that.pageNum === 1) {
					that.goods = null
				}
                //追加数据
                req.data.goods.forEach(data => {
					that.goods.push(data)
				})
                //是否最后一页
                if (req.data.goods.length < that.pageSize) {
					that.status = 'nomore';
				} else {
					that.status = 'loadmore';
				}
            } else {
				that.goods = null
				that.status = 'nomore';
			}
        }
    }
}

如果是弹窗的要用loadmore事件

HTML ，利用@touchmove.native.stop.prevent 阻止穿透

<view>
    <u-popup :closeOnClickOverlay="true" closeIconPos="top-right" round="20" :show="goods_show" mode="bottom" @close="close" @open="open" @touchmove.native.stop.prevent>//@touchmove.native.stop.prevent 阻止穿透
        <view>
            <!-- 内容 -->
        </view>
        <u-loadmore :status="status" @loadmore='loading' :loading-text="loadingText" :loadmore-text="loadmoreText" :nomore-text="nomoreText" />
    </u-popup>
</view>

JS，不再采用onReachBottom这个生命周期

data() {
	return {
        goods_show: false,
        goods: null,
        loadingText: '努力加载中...',
		loadmoreText: '点我加载更多',
		nomoreText: '宝宝底线啦',
		status: 'loadmore',
		pageSize: 20,
		pageNum: 1
    }
}
methods: {
    //打开时
    open() {
		let that = this
		that.pageNum = 1
		that.goods_list()
	},
    loading() {
	    let that = this
	    that.status = 'loading';
	    that.pageNum = ++that.pageNum;
	    setTimeout(() => {
	    	that.goods_list()
	    }, 300)
	},
    goods_list() {
        let that = this
        //写上自己的接口
        that.$http.https("GET", "/index/broadcast/broadcast_goods", {
		    'pageSize': that.pageSize,
			'pageNum': that.pageNum
		}).then(req => {
            if (req.data.code == 200) {
                //页面是1先重置
                if (that.pageNum === 1) {
					that.goods = null
				}
                //追加数据
                req.data.goods.forEach(data => {
					that.goods.push(data)
				})
                //是否最后一页
                if (req.data.goods.length < that.pageSize) {
					that.status = 'nomore';
				} else {
					that.status = 'loadmore';
				}
            } else {
				that.goods = null
				that.status = 'nomore';
			}
        }
    },
    //关闭时
    close() {
		let that = this;
		that.goods_show = false;
		that.goods = null;
	}
}

后端tp6

public function broadcast_goods(Request $request)
{
    $data = $request->get();
    $pagenum = ($data["pageNum"] - 1) * 20;//当前页
    $pagesize = $data["pageSize"];
    $goods = Db::query("select * from dq_goods where goods_state=1 and delete_time=0 order by goods_sort limit $pagenum,$pagesize");
    if (!empty($goods)){
        return json(['code' => 200, 'goods' => $goods, 'msg' => '查询成功']);
    }else{
        return json(['code' => 201, 'msg' => '操作成功']);
    }
}