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

本文主要是介绍如何使用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 = nullthat.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 = thisthat.pageNum = 1that.goods_list()},loading() {let that = thisthat.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 = nullthat.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' => '操作成功']);}
}

这篇关于如何使用uview中的loadmore上拉加载的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---