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

效果

引入loadmore

首先搜索和tab的样式

<view class="tabPage"><u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs><u-cell-group v-for="(item,index) in answerData" :key="index"><u-cell-item :title="item.title" @click="cellClick(item)" :value="getSourceByPinYin(item.source)" title-width="500":title-style="{overflow: 'hidden','text-overflow':'ellipsis','white-space': 'nowrap',}"></u-cell-item></u-cell-group><u-loadmore :status="status" :load-text="loadText" /></view>

uview中loadMore使用

在这里声明，这些官网中都有写；这里我还写了pagesize和pagenum用来搜索的时候给后台传这些；
相当于往上拉一次就要调用一次接口；

onReachBottom这个是生命周期，所以他要跟method同级哦~
每次拉一次就要让pageNum+1传给后台

     onReachBottom() {this.status = 'loading';this.pageNum = this.pageNum + 1;setTimeout(() => {this.gotoSearch(this.sourceTip)}, 1000)},

这里是搜索的接口，里面是分页的数据，

gotoSearch(sources) {this.sourceTip = sourcesthis.$u.post('/bizContentTypes/search', {keywords: this.keyword,source: sources,page: this.pageNum, //页码size: this.pageSize, //每页条数// 数据类型，1文档，2问答，3流程，4注意事项，5合同范本docType: this.docType}).then(res => {// 这里是我搜索之后要做的事情// 这里需要遍历将每一条的数据push上去if (this.pageNum === 1) {this.answerData = []}res.page.forEach(data => {this.answerData.push(data)})//在这里要进行一个判断，当后端传给我的数据小于每页的数据时就显示没有更多了if (res.page.length < this.pageSize) this.status = 'nomore';else this.status = 'loading';});},

uniapp如何使用uview中的loadmore上拉加载相关推荐

Mint-ui中loadmore(上拉加载下拉刷新)组件在ios中滑动会触发点击事件的解决方法...
bug说明: Mint-ui中loadmore(上拉加载下拉刷新)组件在使用fastclick的情况下 ,在ios设备中滑动会触发点击事件: 解决方法: 我是按需引入,去项目中找到loadmore ...
android中如何实现上拉加载更多功能（建议收藏）
上拉加载更多功能实际上就是给RecyclerView增加一个FooterView,然后通过判断是否滑动到了最后一条Item,来控制FooterView的显示和隐藏,接下来我们来看下如何实现: 一.给A ...
vue项目中vue-scroller实现上拉加载和下拉刷新
vue目前是众所周知的流行框架大家都知道的,vue全家桶的成员是:vue-cli,vuex,vue-router,vue-axios(vue2.0).然后它的第三方插件也有很多,比如:vue-scro ...
uniapp 自定义上拉加载下拉刷新组件
介绍该组件是结合uview框架写的,主要结合了里面的u-loadmore组件,可配置下拉刷新加载圈的颜色及背景色,暂无数据时的图等,突出的特点就是通过设置组件的高度,适配刘海屏iPhone,且支持嵌 ...
webpack+vue+mint-ui 实现上拉加载更多（Loadmore组件）
因为业务的需要界面需要实现分页的功能,所以我就研究了一下如何利用mint-ui自带的loadmore组件实现上拉加载更多功能. 首先在文件中引入组件 import {Indicator, Loadmo ...
uni-app 数据上拉加载更多功能
实现上拉加载更多打开项目根目录中的 pages.json 配置文件,为 subPackages 分包中的商品 goods_list 页面配置上拉触底的距离: "subPackages&qu ...
uni-app 上拉加载函数 onReachBottom 不触发
记一次问题解决记录. 问题:uni-app 上拉加载函数不触发. 首先我已经在 pages.json 文件中配置了 enablePullDownRefresh 为 true,且配置正确. {" ...
关于uniapp的下拉刷新，上拉加载的使用
uniapp 是基于vue生态的,兼容多端的解决方案的一个框架. 其编码风格和原生的信微信小程序有极为相似. uniapp可以轻松实现下拉刷新和上拉加载的效果,在实际应用中,对于我们对列表的分页处理, ...
uni-app下拉刷新、上拉加载更多实现
下拉刷新下拉刷新文档在 js 中定义 onPullDownRefresh 处理函数(和onLoad等生命周期函数同级),监听该页面用户下拉刷新事件. 需要在 pages.json 里,找到的当前页 ...
uniapp实现上拉加载更多
目录一.添加全部 1.在主页面中添加一列 2.改云函数 3.插件市场导入加载中组件二.实现上拉加载 1.云函数中可以接收参数 2.获取下拉事件 3.写触发这个下拉干嘛在显示加载中的组件里面 ...

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

效果

引入loadmore

uniapp如何使用uview中的loadmore上拉加载相关推荐

最新文章

热门文章