一篇教你 uniapp 往下滑动 实现分页

系列文章目录

提示：接口需要替换成自己的

---

---

前言

当今移动应用程序设计的潮流是使用户的体验尽可能地自然和流畅。下拉刷新和往下翻页效果已经成为普遍的 UI 设计模式。本文介绍了如何使用 uniapp 来实现一个流畅自然的往下翻页效果，旨在提供给开发者们一个有用的参考。在接下来的文章中

例如：。

---

一、使用步骤

1.先看完整代码

代码如下（示例）：

<template>
  <view style="padding: 2%">
    <view>
      <image src="/static/images/img/publicize-1.jpg" style="width: 725rpx; border-radius: 15rpx" mode="widthFix"/>
    </view>
    <view class="content" v-for="(item,index) in data" @touchstart="start" @touchend="end">
      <view>
        <view class="title">{{item.title}}</view>
        <view style="font-size: 27rpx;color: #818181;margin-top: 10rpx">发布于 <text style="font-size: 20rpx;margin-left: 10px;">{{ item.createTime | formatDate }}</text></view>
      </view>
      <image :src="item.image" class="img"/>
    </view>
    <view class="loadingText">{{loadingText}}</view>
  </view>
</template>

<script>
import {CategoryList} from "@/api/article_api.js";
export default {
  data() {
    return {
        startData: {
           clientX: 0,
           clientY: 0
        },
        params:{
            title:"",
            createTime:"",
            current:1,
            size:5
        },
        data: [],
        page: 1,
        loadingText: '上拉显示更多'
        
    }
  },
  filters:{
       formatDate(date){
                      console.log(date)
                      let newDate = new Date(date);
                      let year = newDate.getFullYear();
                      let month = newDate.getMonth().toString().padStart(2,0);
                      let day = newDate.getDay().toString().padStart(2,0);
                      return year + '-' + month + '-' + day;
                  }       
  },
  onLoad(options) {
              this.sendCategorylist()
          },
          onPullDownRefresh() {
              this.params.current = 1
              this.sendCategorylist()
          },
          onReachBottom() {
              this.getMoreList();
          },
  methods: {
      start(e) {
                      console.log("开始下滑坐标", e.changedTouches[0].clientY)
                      this.startData.clientX = e.changedTouches[0].clientX;
                      this.startData.clientY = e.changedTouches[0].clientY;
                  },
                async end(e) {
                    console.log("结束下滑坐标", e.changedTouches[0].clientY)
                    const subX = e.changedTouches[0].clientX - this.startData.clientX;
                    const subY = e.changedTouches[0].clientY - this.startData.clientY;
                    if (subY < -50) {
                            console.log('下滑')
                            // 翻页
                            this.loadingText = '-- 正在加载 --'
                            let categorylist = await CategoryList(this.params); // 接口调用
                            
                            if(categorylist.records.length == 0 || categorylist.records == null){
                                    this.loadingText = '-- 暂无更多 --'
                                    return false;
                            }
                            
                             var newlist = categorylist.records;
                            this.data = this.data.concat(newlist)
                            this.params.size++
                    } else if (subY > 50) {
                            console.log('上滑')
                    } else if (subX > 50) {
                            console.log('左滑')
                            uni.navigateTo({
                                url: "/pages/login/login"
                            })
                    } else if (subX < -50) {
                        console.log('右滑')
                    } else {
                        console.log('无效')
                }
            },
      
       async sendCategorylist(){
           try {
               let categorylist = await CategoryList(this.params);
               console.log("categorylist.records：：{}",categorylist.records)
               console.log("data：：{}",this.data)
               this.data=categorylist.records
               uni.stopPullDownRefresh()
                   this.params.current++
             
            }catch(e){
                console.log(e)
                uni.showToast({
                  icon: 'none',
                  duration: 1000,
                  title: e
                });
            }finally{
                console.log("finally")
            }
       },   
  },
}
</script>

<style lang="scss">

page {
  background-color: #ffffff;
}

.content {
  margin-top: 20rpx;
  display: flex;
  justify-content: space-between;
  padding-bottom: 10rpx;
  border-bottom: 1rpx solid #e5e5e5;
}

.title {
  background-color: #f1fbfa;
  margin-top: 10rpx;
  line-height: 80rpx;
  padding-left: 15rpx;
  border-radius: 15rpx;
  height: 80rpx;
  word-break: break-all;
  width: 300rpx;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow-x: hidden;
  font-size: 30rpx;
}

.img {
  height: 140rpx;
  width: 220rpx;
  border-radius: 10rpx
}

.loadingText {
        padding: 20rpx 0 40rpx 0;
        text-align: center;
        color: #310D05;
        font-size: 28rpx;
    }
</style>

---

总结

提示：这个还是很简单的：

自身拥有越丰富，他在别人身上所能发现得到的就越少，加油各位，原神启动！！！！