一、添加全部

1.在主页面中添加一列

2.改云函数

3.插件市场导入加载中组件

二、实现上拉加载

1.云函数中可以接收参数

2.获取下拉事件

3.写触发这个下拉干嘛

在显示加载中的组件里面

一、添加全部

1.在主页面中添加一列

data.unshift({name:'全部'}) //添加一列 ‘全部’

2.改云函数

（累了直接上代码）这里match匹配空对象相当于全部哈

'use strict';
const db=uniCloud.database()//1.创建引用
exports.main = async (event, context) => {//event为客户端上传的参数const {name} = event//等同 var name=event.namelet matchObj={}if (name !== '全部') {matchObj = {classify: name}} const list =await db.collection('article')    //2.创建.aggregate()//获取聚合操作实例.match(matchObj)//筛选出classify是前端开发的.project({content:0})//类似.field.end()return {code: 200,msg: '数据请求成功',data: list.data}};

3.插件市场导入加载中组件

二、实现上拉加载

上拉加载实际上把一页分成好几页来加载，拉一下就加载一点点就这样

1.云函数中可以接收参数

'use strict';
const db=uniCloud.database()//1.创建引用
exports.main = async (event, context) => {//event为客户端上传的参数const {name,page = 1,pageSize = 10} = event//等同 var name=event.namelet matchObj={}if (name !== '全部') {matchObj = {classify: name}}const list =await db.collection('article')    //2.创建.aggregate()//获取聚合操作实例.match(matchObj)//筛选出classify是前端开发的.project({content:0})//类似.field.skip(pageSize * (page - 1)).limit(pageSize)//返回几条数据？.end()return {code: 200,msg: '数据请求成功',data: list.data}};

2.获取下拉事件

 <scroll-view class="list-scroll" scroll-y @scrolltolower="loadmore">

传呀传

methods:{loadmore(){this.$emit('loadmore')}}

传呀传

传到头啦

3.写触发这个下拉干嘛

loadmore() {if (this.load[this.activeIndex].loading === 'noMore') returnthis.load[this.activeIndex].page++this.getList(this.activeIndex)},

getList里面

getList(current) {if (!this.load[current]) {this.load[current] = {page: 1,loading: 'loading'}} //分离page 不能让他们共享一个console.log('当前的页数', this.load[current].page);this.$api.get_list({ //传三个参数name: this.tab[current].name,page: this.load[current].page,pageSize: this.pageSize}).then(res => {console.log(res);const {data} = resif (data.length === 0) {let oldLoad = {}oldLoad.loading = 'noMore'oldLoad.page = this.load[current].pagethis.$set(this.load, current, oldLoad)// 强制渲染页面this.$forceUpdate()return}let oldList = this.listCatchData[current] || []oldList.push(...data)this.$set(this.listCatchData, current, oldList)})}

完整代码：

<template><swiper @change="change" :current="activeIndex" style="height: 100%"><swiper-item style="height: 100%" v-for="(item ,index) in tab" :key="index" class="swiper-item"><list-item :list="listCatchData[index]" :load="load[index]" @loadmore="loadmore"></list-item></swiper-item></swiper>
</template><script>export default {name: "list",props: {tab: {type: Array,default () {return []}},activeIndex: {type: Number,default: 0}},data() {return {list: [],// js 的限制 listCatchData[index] = datalistCatchData: {},load: {},pageSize: 10};},watch: {tab(newVal) {//如果是新的tabif (newVal.length === 0) returnthis.listCatchData = {}this.load = {}  this.getList(this.activeIndex)}},methods: {loadmore() {//if ‘没有更多数据’就返回 不申请啦if (this.load[this.activeIndex].loading === 'noMore') returnthis.load[this.activeIndex].page++this.getList(this.activeIndex)},change(e) {const {current} = e.detail; //取到 current这个数据this.$emit('change', current)// TODO 当数据不存在 或者 长度是 0 的情况下，才去请求数据 不用每次都加载已经加载过的if (!this.listCatchData[current] || this.listCatchData[current].length === 0) {this.getList(current)}},getList(current) {if (!this.load[current]) {//分离page 不能让他们共享一个this.load[current] = {page: 1,loading: 'loading'}} console.log('当前的页数', this.load[current].page);this.$api.get_list({ //传三个参数name: this.tab[current].name,page: this.load[current].page,pageSize: this.pageSize}).then(res => {console.log(res);const {data} = resif (data.length === 0) //if没有数据就搞它let oldLoad = {}oldLoad.loading = 'noMore'oldLoad.page = this.load[current].pagethis.$set(this.load, current, oldLoad)// 强制渲染页面this.$forceUpdate()return}let oldList = this.listCatchData[current] || []//解决每次加载覆盖 没有新的oldList.push(...data)this.$set(this.listCatchData, current, oldList)})}}}
</script><style lang="scss">.home-swiper {height: 100%;.swiper-item {height: 100%;overflow: hidden;.list-scroll {height: 100%;}}}
</style>

在显示加载中的组件里面

<uni-load-more  iconType="snow" :status="load.loading"></uni-load-more>

uniapp实现上拉加载更多相关推荐

uni-app 数据上拉加载更多功能
实现上拉加载更多打开项目根目录中的 pages.json 配置文件,为 subPackages 分包中的商品 goods_list 页面配置上拉触底的距离: "subPackages&qu ...
uni-app实现上拉加载更多
我这里是运用官方的onReachBottom,没有用组件直接上代码首先在data里定义page onReachBottom: function() {this.page++; //页面+1var ...
uniapp小程序实现上拉加载更多
废话不多说直接上代码,对了这里的上拉组件使用的是uniapp自带的组件uni-load-more <template><view><view v-for="(i ...
uniapp微信小程序uni-load-more上拉加载更多数据
1.引入uni-app中uni-load-more.vue到自己的项目 import uniLoadMore from '@/components/uni-load-more/uni-load-mor ...
uniapp 下拉刷新、上拉加载更多、最常见的节流场景
首先在pages.josn文件内的pages数组中找到你向加下拉刷新的页面. 找到后添加: {"path": "pages/equipment/equipment&quo ...
小程序：区域滚动、下拉刷新、上拉加载更多
一.简介开发环境:小程序.uniapp 实现功能:列表页面实现,区域滚动.下拉刷新.上拉加载更多,效果如图: 正常: 下拉刷新: 上拉加载: 二.实现 2.1.代码 <scroll-view ...
android SwipeRefreshLayout 增加上拉加载更多
2019独角兽企业重金招聘Python工程师标准>>> 大家可能有的没有swipeRefreshLayout这个类,简单说一下,这是v4包里面的,19.1版本的时候就有了,但是当时的 ...
Flutter开发之ListView下拉刷新上拉加载更多（35）
在Flutter开发之ListView组件(21) 文章中,我们了解了ListView组件的基本使用.但是数据比较少,没有涉及分页加载.而实际开发中,下拉刷新和分页加载几乎是所有APP的标配.在iOS ...
【Flutter】ListView 列表高级功能 ( ScrollController 上拉加载更多 )
文章目录一.ScrollController 上拉加载更多二.ScrollController 使用流程三.ScrollController 判定滑动到底部四.完整代码示例五.相关资源一. ...

uniapp实现上拉加载更多

一、添加全部

1.在主页面中添加一列

2.改云函数

3.插件市场导入加载中组件

二、实现上拉加载

1.云函数中可以接收参数

2.获取下拉事件

3.写触发这个下拉干嘛

在显示加载中的组件里面

uniapp实现上拉加载更多相关推荐

最新文章

热门文章

uniapp实现上拉加载更多

一、添加全部

1.在主页面中添加一列

2.改云函数

3.插件市场导入 加载中组件

二、实现上拉加载

1.云函数中可以接收参数

2.获取下拉事件

3.写触发这个下拉干嘛

在 显示加载中的组件里面

uniapp实现上拉加载更多相关推荐

最新文章

热门文章

3.插件市场导入加载中组件

在显示加载中的组件里面