uniapp 上拉刷新下拉加载

最新推荐文章于 2024-09-17 22:42:06 发布
最新推荐文章于 2024-09-17 22:42:06 发布
阅读量74 收藏
点赞数 1
文章标签： uni-app css javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44286765/article/details/141169079
版权 
<template>
  <view>
    <movable-area
      style="width: 100%;height: 100%;"
      :style="{ height: scrollHeight + 50 + 'px' }"

    >
      <view
        class="display_flex_center"
        style="height: 40px; font-size: 15px; color: #6b6a6a"
      >
        <view v-if="refreshSuccess">
          {{ refreshSuccessText }}
        </view>
        <block v-else>
          <view  v-if="!refreshing"  class="refresh-icon display_flex_center" :class="{ 'refresh-icon-active': refreshFlag }" >↓ </view>
          <view v-if="!refreshing">{{
            refreshFlag ? refreshReady : refreshText
          }}</view>
          <view v-else class="display_flex_center">
            <image src="https://caishentongweb.oss-cn-hangzhou.aliyuncs.com/mp-weixin/loading.gif" class="loading_img"></image>
            <text>{{ refreshingText }}</text>
          </view>
        </block>
      </view>
      <movable-view
        :x="x"
        :y="y"
        :direction="isRefresh ? 'vertical' : 'none'"
        :out-of-bounds="false"
        style="width: 100%"
        :style="{ height: scrollHeight + 'px' }"
        @change="onChange"
        @touchend="touchend"
      >
        <view :style="{ height: scrollHeight + 'px' }">
          <scroll-view
            :scroll-y="scrollStatus"
            :style="{
              height: scrollHeight + 'px',
              background: backgroundColor,
            }"
            :scroll-into-view="top_viewId"
            :upper-threshold="10"
            @scroll="onScroll"
            @scrolltoupper="scrollToTop"
            @scrolltolower="loadMore"
          >
            <view id="top_view" @touchstart="touchstart" @touchmove="touchMove">
              <slot></slot>
            </view>
            <view
              class="display_flex_center"
              style="height: 40px; font-size: 15px; color: #999"
            >
              <block v-if="noMore">
                {{ noMoreText }}
              </block>
              <block v-else-if="isLoading != 2">
                {{ loadingMoreText }}
              </block>
              <block v-else>
                {{ loadingText }}
              </block>
            </view>
            <view
              v-if="showGoTop && scrollTop > scrollHeight"
              class="go_top_icon_back"
              @click.stop="goTop"
            >
              <image src="https://caishentongweb.oss-cn-hangzhou.aliyuncs.com/mp-weixin/go_top.png" class="top_icon"></image>
            </view>
          </scroll-view>
        </view>
      </movable-view>
    </movable-area>
  </view>
</template>

<script>
export default {
  name: "zyq-movableRefresh",
  props: {
    isRefresh: {
      type: Boolean,
      default: true,
    },
    scrollHeight: {
      type: Number,
      default: 300,
    },
    refreshText: {
      type: String,
      default: "下拉可以刷新",
    },
    refreshReady: {
      type: String,
      default: "释放立即刷新",
    },
    refreshingText: {
      type: String,
      default: "正在刷新...",
    },
    refreshSuccessText: {
      type: String,
      default: "刷新完成",
    },
    loadingMoreText: {
      type: String,
      default: "上拉加载更多",
    },
    loadingText: {
      type: String,
      default: "正在加载...",
    },
    noMoreText: {
      type: String,
      default: "已经到底了~",
    },
    pullHeight: {
      type: Number,
      default: 40,
    },
    noMore: {
      type: Boolean,
      default: false,
    },
    backgroundColor: {
      type: String,
      default: "#eee",
    },
    showGoTop: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      x: 50,
      y: 0,
      old: {
        x: 0,
        y: 0,
      },
      refreshFlag: false,
      refreshing: false,
      scrollStatus: true,
      isLoading: 0, //加载状态，1：正在下拉刷新，2：正在触底加载
      refreshSuccess: false,
      scrollTop: 0,
      startX: 0,
      startY: 0,
      inTop: true,
      moveHeight: 0, //下拉刷新移动距离
      showLoadingMore: false,
      top_viewId: "",
    };
  },
  methods: {
    onChange(e) {
      let y = e.detail.y;
      this.old.x = e.detail.x;
      this.old.y = y;
      this.moveHeight = y;
      if (y < this.pullHeight) {
        this.refreshFlag = false;
      } else {
        this.refreshFlag = true;
      }
    },
    touchstart(e) {
      let obj = e.changedTouches[0];
      this.startX = obj.pageX;
      this.startY = obj.pageY;
    },
    touchMove(e) {
      if (!this.isRefresh) {
        return;
      }
      this.refreshSuccess = false;
      let obj = e.changedTouches[0];
      let endX = obj.pageX;
      let endY = obj.pageY;
      let distanceX = endX - this.startX;
      let distanceY = endY - this.startY;
      if (
        (this.inTop || this.scrollTop == 0) &&
        Math.abs(distanceX) < Math.abs(distanceY) &&
        distanceY > 0
      ) {
        this.scrollStatus = false;
      }
    },
    touchend(e) {
      let that = this;
      let moveHeight = this.moveHeight;
      if (moveHeight < this.pullHeight) {
        this.x = this.old.x;
        this.y = this.old.y;
        this.$nextTick(function () {
          this.x = 0;
          this.y = 0;
        });
        this.refreshFlag = false;
        this.refreshing = false;
      } else {
        this.refreshing = true;
        this.refreshFlag = true;
        this.refresh();
      }
      this.scrollStatus = true;
    },
    scrollToTop(e) {
      if (this.scrollTop < 5) {
        this.inTop = true;
      }
    },
    onScroll(e) {
      let scrollTop = e.detail.scrollTop;
      this.scrollTop = scrollTop;
      this.$emit("onScroll", scrollTop);
      if (scrollTop > 3) {
        this.inTop = false;
      } else {
        this.inTop = true;
      }
    },
    goTop() {
      this.top_viewId = "";
      this.$nextTick(function () {
        this.top_viewId = "top_view";
      });
    },
    runRefresh(callback = false) {
      let that = this;
      this.x = this.old.x;
      this.y = this.old.y;
      this.$nextTick(function () {
        this.scrollTop = 0;
        this.x = that.pullHeight;
        this.y = that.pullHeight;
        that.refreshing = true;
        that.refreshFlag = true;
        that.refresh();
      });
    },
    refresh() {
      if (this.isLoading) {
        return;
      }
      this.isLoading = 1;
      this.$emit("refresh");
    },
    loadMore() {
      if (this.noMore || this.isLoading) {
        return;
      }
      this.isLoading = 2;
      this.$emit("loadMore");
    },
    endLoad() {
      let that = this;
      this.refreshSuccess = true;
      setTimeout(function () {
        that.refreshSuccess = false;
      }, 800);
      this.x = this.old.x;
      this.y = this.old.y;
      this.$nextTick(function () {
        this.x = 0;
        this.y = 0;
      });
      this.scrollStatus = true;
      this.refreshing = false;
      this.refreshFlag = false;
      this.isLoading = 0;
    },
  },
};
</script>

<style>
.display_flex_center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.refresh-icon {
  width: 20px;
  height: 20px;
  font-weight: 700;
  transition-duration: 0.5s;
  transition-property: transform;
  transform: rotate(0deg);
}
.refresh-icon-active {
  transform: rotate(180deg);
}
.loading_img {
  width: 20px;
  height: 20px;
  margin-right: 5px;
}
.go_top_icon_back {
  position: fixed;
  right: 40px;
  bottom: 40px;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  background: #f5f7fa;
  display: flex;
  justify-content: center;
  align-items: center;
}
.top_icon {
  height: 30px;
  width: 30px;
}
</style>


使用--------------------------------------------
<template>
  <view class="content">
    <movable-refresh
      ref="movableRefresh"
      :scrollHeight="scrollHeight"
      :showGoTop="false"
      :noMore="noMore"
      :isRefresh="true"
      @refresh="refresh"
      @loadMore="loadMore"
      backgroundColor="#F5F7FA"
    >
      <view
        class="list-item display justify-content align-items"
        v-for="(item, index) in list"
        :key="index"
      >
        <view class="list-item-left">
          <image
            :src="Notify"
            class="list-item-img"
            :class="item.isRead ? 'read' : ''"
          />
        </view>
        <view class="list-item-right">
          <view class="list-item-right-top display justify-content align-items">
            <view class="list-item-right-title"
              >{{ item.title }}{{ index }}</view
            >
            <view class="list-item-right-time">{{ getTimer(item.time) }}</view>
          </view>

          <view class="list-item-right-bottom">
            <view class="list-item-right-content">{{ item.content }}</view>
          </view>
        </view>
      </view>
    </movable-refresh>
  </view>
</template>

<script>
import { getTimer } from "@/utils/getTimer.js";
import movableRefresh from "@/components/zyq-movableRefresh/zyq-movableRefresh.vue";

export default {
  components: {
    movableRefresh,
  },
  data() {
    return {
      getTimer,
      Notify:
        "https://caishentongweb.oss-cn-hangzhou.aliyuncs.com/mp-weixin/messageNotify.png",
      scrollHeight: 100,
      total: 30,
      noMore: false,
      list: [
        {
          id: 1,
          title: "休假申请",
          content: "您有一条休假申请待处理",
          time: "2022-10-10 10:10:10",
          isRead: false,
        },
        {
          id: 1,
          title: "休假申请",
          content: "您有一条休假申请待处理",
          time: "2022-10-10 10:10:10",
          isRead: false,
        },
        {
          id: 1,
          title: "休假申请",
          content: "您有一条休假申请待处理",
          time: "2022-10-10 10:10:10",
          isRead: false,
        },
        {
          id: 1,
          title: "休假申请",
          content: "您有一条休假申请待处理",
          time: "2022-10-10 10:10:10",
          isRead: false,
        },
        {
          id: 1,
          title: "休假申请",
          content: "您有一条休假申请待处理",
          time: "2022-10-10 10:10:10",
          isRead: false,
        },
        {
          id: 1,
          title: "休假申请",
          content: "您有一条休假申请待处理",
          time: "2022-10-10 10:10:10",
          isRead: false,
        },
        {
          id: 1,
          title: "休假申请",
          content: "您有一条休假申请待处理",
          time: "2022-10-10 10:10:10",
          isRead: false,
        },
      ],
      list1: [
        {
          id: 1,
          title: "休假申请",
          content: "您有一条休假申请待处理",
          time: "2022-10-10 10:10:10",
          isRead: false,
        },
        {
          id: 1,
          title: "休假申请",
          content: "您有一条休假申请待处理",
          time: "2022-10-10 10:10:10",
          isRead: false,
        },
        {
          id: 1,
          title: "休假申请",
          content: "您有一条休假申请待处理",
          time: "2022-10-10 10:10:10",
          isRead: false,
        },
        {
          id: 1,
          title: "休假申请",
          content: "您有一条休假申请待处理",
          time: "2022-10-10 10:10:10",
          isRead: false,
        },
        {
          id: 1,
          title: "休假申请",
          content: "您有一条休假申请待处理",
          time: "2022-10-10 10:10:10",
          isRead: false,
        },
        {
          id: 1,
          title: "休假申请",
          content: "您有一条休假申请待处理",
          time: "2022-10-10 10:10:10",
          isRead: false,
        },
      ],
    };
  },
  onLoad() {
    let system = uni.getSystemInfoSync();
    this.scrollHeight = system.windowHeight - 32;
  },
  methods: {
    refresh() {
      uni.showLoading({
        title: "加载中...",
        icon: "loading",
      });
      setTimeout(() => {
        this.list = this.list1;
        this.$refs["movableRefresh"].endLoad();
        uni.hideLoading();
      }, 2000);
    },

    getList() {
      uni.showLoading({
        title: "加载中...",
        icon: "loading",
      });
      setTimeout(() => {
        this.list = [...this.list, ...this.list1];
        this.$refs["movableRefresh"].endLoad();
        uni.hideLoading();
      }, 2000);
    },

    loadMore() {
      console.log(this.list.length);
      console.log(this.total);
      if (this.list.length > this.total || this.list.length == this.total) {
        this.noMore = true;
        uni.showToast({
          title: "没有更多了...",
          icon: "none",
          duration: 1000,
        });
        return;
      } else {
        this.getList();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100vh;
  background-color: $background-color;
  padding: 32rpx 24rpx;
  .list-item {
    padding: 34rpx 30rpx;
    border-radius: 24rpx;
    background: $uni-text-color-inverse;
    margin-bottom: 21rpx;
    &:last-child {
      margin-bottom: 0;
    }
    .list-item-right-title,
    .list-item-right-time,
    .list-item-right-content {
      font-family: PingFangSC_0;
      font-weight: 400;
    }

    .list-item-left {
      position: relative;
    }
    .read::after {
      border-radius: 50%;
      content: "";
      position: absolute;
      width: 16rpx;
      height: 16rpx;
      background: #ff0000;
      right: 0;
      top: 0;
    }

    .list-item-img {
      width: 94rpx;
      height: 94rpx;
    }
    .list-item-right {
      padding-left: 24rpx;
      flex: 1;
      .list-item-right-title {
        font-size: 32rpx;
        color: $uni-text-color;
        line-height: 45rpx;
      }
      .list-item-right-time {
        font-size: 24rpx;
        color: $uni-text-color-grey;
        line-height: 36rpx;
      }
      .list-item-right-content {
        font-size: 26rpx;
        color: $uni-text-color-grey;
        line-height: 36rpx;
      }
    }
  }
}
</style>
我有一粒花生米
关注
uniapp 下拉刷新和上拉加载更多
a_靖的博客
02-05 5439
uniapp 下拉刷新和下拉加载更多实现代码，兼容小程序，H5，app，真机测试可用。 实现代码 1.在页面写这两方法，分别是下拉刷新和下拉触底的监听事件 // 下拉刷新 onPullDownRefresh() { console.log('下拉刷新') setTimeout(() => { console.log('下拉刷新停止') uni.stopPullDownRefresh() },5500) }, // 上拉加载 onReachB
uniapp上拉刷新，下拉加载
weixin_42066070的博客
10-09 384
设置相应的界面 "enablePullDownRefresh": true,
uniapp 实现上拉加载下拉刷新
m0_53398323的博客
12-30 2114
【代码】uniapp 实现上拉加载下拉刷新。
小程序 uniApp 下拉刷新 上拉加载
m0_60505147的博客
09-15 2387
在小程序和uniapp 中 可以通过 这个组件来实现 下拉刷新 和 上拉加载的功能。设置下拉刷新的状态 （true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发）往往需要的操作 就是将 当前页面的数据重置 对于固定的数据 只需要重新发起一次请求 ，对于。// 上拉加载 只需要 调用组件中 请求列表数据的方法。只需要清空之前记录的数据 ，在页面更新时在发起请求。// css 要加 不然滚动刷新不触发。可以实现 横向 或纵向的滚动。下拉刷新的目的 就是。
Uniapp下拉刷新和上拉加载
weixin_53156345的博客
08-04 471
在 js 中定义 onPullDownRefresh 处理函数（和onLoad等生命周期函数同级），监听该页面用户下拉刷新事件。上拉加载更多可以使用 onReachBottom 事件，用法和下拉加载一样，需要放在和data同级使用即可。里，找到的当前页面的pages节点，并在。
uniapp向上拉加载，下拉刷新
wendy_qx的博客
12-19 3014
如使用scroll-view导致页面没有滚动，则触底事件不会被触发。scroll-view滚动到底部的事件请参考scroll-view的文档。首先需要在pages.json中找到需要下拉刷新的页面，配置enablePullDownRefresh为true。比如设为50，那么滚动页面到距离底部50px时，就会触发onReachBottom事件。可在pages.json里定义具体页面底部的触发距离。
uniapp实现上拉刷新下拉加载
05-26
uniapp实现上拉刷新下拉加载，就搜索功能，接口数据还需自己模拟，博客的视频分类中有录屏效果，方便大家查看，在数据模拟中添加了三种状态，即可实现状态的更新与数据的操作，希望可以对大家有所帮助！！
uniapp新闻列表-上拉刷新-下拉加载更多.zip
12-08
【uniapp新闻列表-上拉刷新-下拉加载更多】是一个基于uniapp框架开发的应用功能模块，主要用于构建具有动态加载和刷新功能的新闻列表。uniapp是一个多端开发框架，它允许开发者用一种语言（Vue.js）编写代码，然后...
uniapp-上拉加载和下拉刷新
2201_75853458的博客
11-16 505
注意：1.在下拉刷新时在pages.json中打开"enablePullDownRefresh": true。2.上拉加载关键点就是在数组不是覆盖而是。
uniapp 苹果安全域适配
qq_31594665的博客
09-14 363
一、使用原生占位（仅App端支持）
uniapp uview扩展u-picker支持日历期间 年期间 月期间 时分期间组件
最新发布
luck332的专栏
09-17 262
uniapp uview扩展u-picker支持日历期间 年期间 月期间 时分期间组件日历期间、年期间、月期间及时分期间组件在不同的应用场景中发挥着重要的作用。这些组件通常用于表单、应用程序或网站中，以方便用户输入和选择特定的日期和时间范围。
uni-app获取设备唯一值、静态IP以及公网IP的方法
军魂L
09-12 490
特意在此记录一下，方便以后用得到。
uniapp 做一个查看图片的组件，图片可缩放移动
qq_56995244的博客
09-12 434
要注意 transform的translate和scale属性在同一标签上不会一起生效。因为是手机端，所以需要触摸可移动，双指放大缩小。查看图片使用 uni-popup 弹窗。方法直接调用组件open方法就OK了。首先在components里建个组件。缩放就根据双指距离的变大变小进行缩放。外面组件调用时引用或者全局注册后使用。移动就根据触摸效果进行偏移图片。外面图片上加个点击事件。
uniapp 多个动态表单进行校验
m0_65546127的博客
09-14 464
uniapp 多个动态表单进行校验。
使用 uni-app 开发微信小程序的详细指南
2301_79685859的博客
09-16 770
uni-app是一个使用 Vue.js 框架开发跨平台应用的前端框架。开发者通过编写一套代码，可以生成多端应用，包括 H5、iOS、Android、微信小程序、支付宝小程序、字节跳动小程序等。
详细分析Uniapp中的轮播图基本知识（附Demo）
码农研究僧的博客
09-12 1173
在 uni-app 中， 组件是一个用于轮播图的基础组件，类似于其他前端框架中的 carousel 配合 ，可以实现多个页面、图片或内容的循环切换 uni-swiper-dot 组件用于为轮播图提供分页指示器（即小点） 组件：用于创建轮播图的组件
uniapp上使用document方案之renderjs
u010674395的专栏
09-13 527
使用uniapp做app时候，无法使用document，根据uniapp官方文档，可以引入renderjs是一个运行在视图层的js。它只支持app-vue和web。renderjs。
Uniapp + Vue3 + Vite +Uview + Pinia 实现购物车功能（最新附源码保姆级）
一名全栈小白的博客
09-11 757
Uniapp + Vue3 + Vite +Uview + Pinia 实现购物车功能（最新附源码保姆级）
uniapp 上拉加载下拉刷新
08-30
在 UniApp 中，你可以通过使用组件和相应的事件来实现上拉加载和下拉刷新功能。 对于下拉刷新，你可以使用 `<uni-scroll-view>` 组件，它提供了 `@pullingdown` 事件，用于触发下拉刷新操作。在监听到该事件后，你可以执行相应的数据更新操作。以下是一个简单示例： ```html <template> <uni-scroll-view class="content" @pullingdown="onPullDownRefresh"> <!-- 列表内容 --> </uni-scroll-view> </template> <script> export default { methods: { onPullDownRefresh() { // 执行下拉刷新操作，更新数据 } } } </script> ``` 对于上拉加载更多，你可以使用 `<uni-scroll-view>` 的 `@scrolltolower` 事件，该事件会在滚动到底部时触发。在该事件的回调函数中，你可以执行加载更多数据的操作。以下是一个简单示例： ```html <template> <uni-scroll-view class="content" @scrolltolower="onScrollToLower"> <!-- 列表内容 --> </uni-scroll-view> </template> <script> export default { methods: { onScrollToLower() { // 执行加载更多数据的操作 } } } </script> ``` 需要注意的是，以上只是基本示例，具体操作和实现方式可能会根据你的项目需求而有所变化。你可以根据 UniApp 官方文档中的相关内容进一步了解和定制更适合你项目的上拉加载和下拉刷新功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值