uniapp 上拉加载更多完整实现源码

直接上代码

<template><view class="searchList"><!-- 搜索框 --><Search></Search><img class="top_img" src="@/static/image/dataDelivery.png" /><view class="menus p_r"><view class="" v-for="(item,idx) in title_list"><view class="menuItem p_r" @click="tabChange(idx)" :class="menuIdx==idx?'on':''"><img class="menuIcon" :src="menuIdx==idx?item.select_graph:item.unselected_graph" mode="" /><view class="menuIdx==idx?'on':''">{{item.title}} </view></view><image v-if="menuIdx==idx" class="sanjiao" src="../../static/image/sanjiao.png" mode=""></image></view></view><view class="list"><DataDelivery :type="type" :forumList="forumList" :showNum="2000"></DataDelivery></view></view>
</template><script>import DataDelivery from '@/components/dataDelivery.vue';import Search from '@/components/search.vue';export default {components: {DataDelivery,Search},data() {return {title_list: [],forumList: [],id: '',type: getApp().globalData.TheToolkit,menuIdx: 0,dataDelivery_icon1: this.$config.dadaImagesUrl + 'dataDelivery_icon1.png',dataDelivery_icon11: this.$config.dadaImagesUrl + 'dataDelivery_icon1-1.png',dataDelivery_icon2: this.$config.dadaImagesUrl + 'dataDelivery2.png',dataDelivery_icon22: this.$config.dadaImagesUrl + 'dataDelivery2-2.png',banners: [this.$config.dadaImagesUrl + 'home_menu1.png'],forumLists_pageSize:8,forumLists_page:1,};},onLoad(option) {this.$common.Init.call(this);this.getData()},// 下拉刷新onPullDownRefresh() {console.log('下拉刷新')setTimeout(() => {console.log('下拉刷新停止')uni.stopPullDownRefresh()}, 5500)},// 上拉加载onReachBottom() {console.log('上拉加载')if(this.forumList.length==0)returnthis.forumLists_page=this.forumLists_page+1this.getForumLists();setTimeout(() => {console.log('上拉加载停止')uni.stopPullDownRefresh()}, 5500)},methods: {tabChange(idx) {this.menuIdx = idxthis.forumLists_page=1this.forumList=[]this.id = this.title_list[idx].idthis.getForumLists()},getData() {let data = {type: this.type}this.$request(this.$api.community.topicLists, data).then((res) => {this.title_list = res.data.lists || [];this.id = res.data.lists[0].idthis.getForumLists()});},// 获取帖子列表getForumLists() {let data = {forum_tags_id: this.id,type: this.type,pageSize:this.forumLists_pageSize,page:this.forumLists_page,}this.$request(this.$api.community.forumLists, data).then((res) => {var list = (res.data && res.data.lists) || []list.forEach(item => {item.create_time = this.$util.toDateDetail(item.create_time)})this.forumList = this.forumList.concat(list)console.log('forumList',this.forumList)});},}};
</script><style lang="scss" scoped>.list {border: 2rpx solid #f3f3f3;border-radius: 20rpx;width: 90%;margin-left: 3%;min-height: 300rpx;position: relative;top: -8rpx;padding-top: 40rpx;}.searchList {height: 100vh;}.sanjiao {width: 40rpx;height: 20rpx;margin-left: 56rpx;margin-top: 0rpx;}.menus {justify-content: space-around;margin-top: 20rpx;width: 90%;margin-left: 5%;.menuItem {text-align: center;line-height: 70rpx;border-radius: 14rpx;font-size: 30rpx;color: #d0d0d0;// text{//  position: relative;//   top: -4rpx;// }}.menuIcon {height: 70rpx;position: relative;top: 2rpx;margin-right: 6rpx;}.on {color: #000;}}// background-color: red;.title {position: relative;left: 36rpx;top: 60rpx;font-size: 34rpx;font-family: Source Han Sans CN;font-weight: 500;color: #102841;}
</style>

uniapp 上拉加载更多完整实现源码相关推荐

uni-app 数据上拉加载更多功能
实现上拉加载更多打开项目根目录中的 pages.json 配置文件,为 subPackages 分包中的商品 goods_list 页面配置上拉触底的距离: "subPackages&qu ...
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 ...
Flutter开发之ListView下拉刷新上拉加载更多（35）
在Flutter开发之ListView组件(21) 文章中,我们了解了ListView组件的基本使用.但是数据比较少,没有涉及分页加载.而实际开发中,下拉刷新和分页加载几乎是所有APP的标配.在iOS ...
【Flutter】ListView 列表高级功能 ( ScrollController 上拉加载更多 )
文章目录一.ScrollController 上拉加载更多二.ScrollController 使用流程三.ScrollController 判定滑动到底部四.完整代码示例五.相关资源一. ...
vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多
一.思路分析和效果图用vue来实现一个瀑布流效果,加载网络图片,同时有下拉刷新和上拉加载更多功能效果.然后针对这几个效果的实现,捋下思路: 根据加载数据的顺序,依次追加标签展示效果: 选择哪种方式实 ...
react上拉加载更多
react 前言最近在写的项目中有上拉加载更多的需求.抽空就来写一篇文章. 上拉加载更多,下拉刷新,在原生 App 上经常都用到,既符合用户的使用习惯,也有很多成熟的库可以直接拿来使用.那么在Web ...
下拉刷新及上拉加载更多的ListView
PullToRefreshListView 自定义ListView 带简洁的下拉刷新及上拉加载更多功能 PullToRefreshListView 实现过程使用方法 GIF效果结束语实现过程继 ...

uniapp 上拉加载更多完整实现源码

uniapp 上拉加载更多完整实现源码相关推荐

最新文章

热门文章