首页 > 其他分享 >uni-app实现上拉加载

uni-app实现上拉加载

时间:2024-05-13 17:41:20浏览次数:17  
标签:pageNum res app 上拉 uni data id currentTab

 

参考文档代码:

 1 <template>
 2   <view>
 3     <!-- 省略其他内容 -->
 4     <view v-for="item in dataList" :key="item.id">{{ item.title }}</view>
 5   </view>
 6 </template>
 7 
 8 <script>
 9   export default {
10     data () {
11       return {
12         dataList: [], // 存储数据列表
13         pageNum: 1, // 当前页数
14       }
15     },
16     onReachBottom () {
17       this.requestNextPageData()
18     },
19     methods: {
20       async requestNextPageData () {
21         const res = await uni.request({
22           url: 'your-api-url',
23           data: {
24             pageNum: this.pageNum,
25           },
26         })
27         if (res.statusCode === 200) {
28           const nextDataList = res.data // 假设接口返回数据格式为 { data: [...] }
29           if (nextDataList.length > 0) {
30             this.dataList = this.dataList.concat(nextDataList)
31             this.pageNum++
32           } else {
33             uni.showToast({
34               title: '没有更多了',
35               icon: 'none',
36             })
37           }
38         } else {
39           uni.showToast({
40             title: '请求失败,请重试',
41             icon: 'none',
42           })
43         }
44       },
45     },
46   }
47 </script>

 

 

 

自己的代码:

//上拉加载
        onReachBottom() {
            if (!this.pullUpOn) {
                return;
            }

            //this.loadPosts(false);
        },
// 点击栏目切换当前页时改变样式
            swichNav(e) {
                let cur = e.currentTarget.dataset.current;

                if (this.currentTab == cur) {
                    return false;
                }

                this.currentTab = cur;
                // this.posts = [];
                this.loadPosts(true);
            },
//根据id获取某个分类下文章
            loadPosts(refresh) {
                this.loadding = true;
                Rest.get(Api.JIANGQIE_POSTS_CATEGORY+'&catid='+this.tabbar[this.currentTab]['id']+'&pagesize=50&more=1', {
                    //'offset': refresh ? 0 : this.posts.length,
                    //'sort': this.sorts[this.currentTab]
                }).then(res => {                    
                    this.loaded = true;
                    this.loadding = false;
                    this.posts = (refresh ? res.data : this.posts.concat(res.data));
                    //this.pullUpOn = (res.data.length >= Constants.JQ_PER_PAGE_COUNT);
                    //this.pageNum++;
                    console.log('栏目id',this.tabbar[this.currentTab]['id']);
                    console.log('栏目id文章',res.data);
                });
            }
<!-- 顶部栏目 -->
        <scroll-view scroll-x scroll-with-animation class="tab-view" :scroll-left="0">
            <view v-for="(item, index) in tabbar" :key="index" class="tab-bar-item"
                :class="(currentTab==index ? 'active' : '')" :data-current="index"
                @tap.stop="swichNav">
                <text class="tab-bar-title">{{item.name}}</text>
            </view>
        </scroll-view>

 

标签:pageNum,res,app,上拉,uni,data,id,currentTab
From: https://www.cnblogs.com/lazb/p/18189687

相关文章

  • Docker执行命令报错:Cannot connect to the Docker daemon at unix:///var/run/docker.
    1、问题说明Docker执行重新启动命令重启成功。命令如下:重新加载配置systemctldaemon-reload重启docker服务systemctlrestartdocker.service查看启动状态systemctlstatusdocker.service显示启动成功使用docker-v命令查看版本号输出正常但是使用dockerps......
  • three.weapp.js提示applyMatrix4 is not a function
    最近做项目使用three.weapp,因为是微信版的three,所以删减了好多方法。在使用applyMatrix4时报了 applyMatrix4isnotfunction的错误。解决方法简单,找thee里面有的方法代替。先console.log查看下three.weapp里面的Group prototype有什么可以看到有一个applyMatrix方法。......
  • vue3 - App.vue示例1
    示例1App.vue<!--插入Vue库的CDN链接--><scriptsrc="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script><scriptsetup>importHelloWorldfrom'./components/HelloWorld.vue'</script><templa......
  • react native 项目使用 Xcode 打包上架 App Store
    一、创建证书、标识符和描述文件等:1.前提条件可正常运行和打包的代码、Apple开发者账号点击注册Apple开发者账号注册完进入页面可以看到证书、标识符和描述文件创建入口2.创建AppID点击Identifiers旁边的加号选择AppIDs,点击Continue。选择App,点击Conti......
  • uniapp自定义input清除按钮
    uniapp小程序,引入uni-ui库后,观察到其他组件,有的默认有清除按钮,比如: 在写内置组件input框,查看文档没有此属性,官方示例在这里:https://github.com/dcloudio/hello-uniapp/blob/master/pages/component/input/input.nvue 还需自行复制对应的css,试了下效果不太好。我需要和级联......
  • Laravel Model中的$appends
    protected$appends是Laravel模型中的一个属性,用于指定哪些虚拟属性(Accessor)应该被包含在模型的数组或JSON表示中。虚拟属性是在模型中定义的,通过使用Accessors和Mutators来访问和修改模型属性的值。这些虚拟属性不会存储在数据库中,但可以通过模型实例进行访问和操作......
  • vant---vantui上拉刷新下拉加载
    在用vantui做移动端列表数据渲染的时候,经常会使用到下拉刷新和上来加载。其实在vantui里面,它已经为我们提供了对应的组件,我们只需要去使用即可,具体代码示例:<van-pull-refreshv-model="tableList.refreshing"@refresh="refreshs"><van-listv-model="tableList.isLoadin......
  • 【Halcon】示例程序学习——append_channel / tile_channels
    Name:1、append_channel——将其他矩阵(通达)附加到图像2、tile_channels——多张图像平铺成一个大图像signature:1、append_channel(MultiChannelImage,Image:ImageExtended::)2、tile_channels(Image:TiledImage:NumColumns,TileOrder:)Description:1、运算符ap......
  • uniapp循环请求接口之后跳转
    if(this.model.caseWorkPartyModelList.length>0){letpromises=[];//用于存储所有异步操作的Promiseletthat=thisthis.model.caseWorkPartyModelList.forEach(async(item,index)=>{......
  • LeetCode 1287. Element Appearing More Than 25% In Sorted Array
    原题链接在这里:https://leetcode.com/problems/element-appearing-more-than-25-in-sorted-array/description/题目:Givenanintegerarray sorted innon-decreasingorder,thereisexactlyoneintegerinthearraythatoccursmorethan25%ofthetime,returnthat......