uniapp项目实践总结(十六)自定义下拉刷新组件

导语:在日常的开发过程中,我们经常遇到下拉刷新的场景,很方便的刷新游览的内容,在此我也实现了一个下拉刷新的自定义组件。

目录

  • 准备工作
  • 原理分析
  • 组件实现
  • 实战演练
  • 内置刷新
  • 案例展示

准备工作

  • components新建一个q-pull文件夹,并新建一个q-pull.vue的组件;
  • 按照前面文章所说的页面结构,编写好预定的自定义下拉刷新组件页面;

原理分析

自定义下拉刷新就是在之前自定义滑动触摸组件的基础上,在顶部增加一个刷新的模块。

在页面下拉的时候,判断是否为下滑的方向,如果是就获取数据,数据请求完成后,隐藏刷新模块即可。

组件实现

准备工作和原理分析完成后,接下来写一个简单的组件。

模板部分

这部分主要是显示动画、提示、颜色、背景色以及控制是否展示页面。

html 复制代码
<view class="pull">
  <view
    id="pull-container"
    :style="pullInfo.style"
    ref="pullBox"
    @touchstart="handlerStart"
    @touchmove="handlerMove"
    @touchend="handlerEnd">
    <view class="pull-head">
      <view class="pull-text"> {{ pullInfo.tipText }} </view>
    </view>
    <view class="pull-body">
      <slot></slot>
    </view>
  </view>
</view>

样式部分

scss 复制代码
.pull {
  position: relative;
  width: 100%;
  height: 100%;
  #pull-container {
    position: relative;
    width: 100%;
    height: 100%;
    .pull-head {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      text-align: center;
      transform: translateY(-100%);
      .pull-text {
        padding: 30rpx 0;
        color: $mainColor;
        font-size: 26rpx;
        background: $f8;
        font-weight: bold;
      }
    }
    .pull-body {
      box-sizing: border-box;
      padding: 60rpx;
      text-align: left;
      font-size: 28rpx;
    }
  }
}

脚本部分

  • 引入依赖
js 复制代码
// 导入依赖
import { reactive } from "vue";

// 页面属性

// 下拉刷新
const pullInfo = reactive({
  style: {},
  tipText: "",
  startY: 0,
  deltaY: 0,
  slowY: 0,
  resetTimer: null,
  resetTime: 500,
});

// 发送事件
const emits = defineEmits(["load"]);
  • 开始下拉
js 复制代码
function handlerStart(e) {
  let startY = e.touches[0].pageY;
  pullInfo.style = "transition: transform 0s";
}
  • 下拉移动
js 复制代码
function handlerMove(e) {
  e.preventDefault();
  pullInfo.deltaY = e.touches[0].pageY - pullInfo.startY;
  if (pullInfo.deltaY > 0) {
    pullInfo.tipText = "下拉刷新";
    if (pullInfo.deltaY > 60) {
      pullInfo.tipText = "松开刷新";
      pullInfo.slowY = (pullInfo.deltaY - 60) * 0.2 + 60;
    } else {
      pullInfo.slowY = pullInfo.deltaY;
    }
    pullInfo.style = `transform: translateY(${pullInfo.slowY * 2}rpx)`;
  }
}
  • 下拉结束
js 复制代码
function handlerEnd(e) {
  pullInfo.style = "transition: transform .5s";
  if (pullInfo.deltaY > 60) {
    pullInfo.tipText = "正在加载中...";
    pullInfo.style = "transform: translateY(95rpx)";
    emits("load");
  } else {
    pullInfo.style = "transform: translateY(0)";
  }
}
  • 复位
js 复制代码
function reset() {
  pullInfo.resetTimer = setTimeout(() => {
    pullInfo.tipText = "刷新成功!";
    pullInfo.resetTimer = setTimeout(() => {
      pullInfo.style = "transform: translateY(0)";
      clearTimeout(pullInfo.resetTimer);
    }, pullInfo.resetTime);
  }, pullInfo.resetTime);
}

实战演练

模板使用

html 复制代码
<q-pull
  ref="myPull"
  @load="loadSet">
  <!-- 插槽内容 -->
  <view>
    <view
      v-for="(item, index) in pull.list"
      :key="index"
      >{{item}}</view
    >
  </view>
</q-pull>

脚本使用

定义数据

js 复制代码
// 列表
const pull = reactive({
  list: [1, 2, 3, 4, 5, 6],
});

加载内容

js 复制代码
function loadSet() {
  // 请求数据
  setTimeout(() => {
    let num = Math.random() * 100;
    pull.list.push(num);
    if (proxy.$refs.myPull) {
      proxy.$refs.myPull.reset();
    }
  }, 3000);
}

内置刷新

uniapp 也为我们开发者准备了内置下拉刷新,一起去看看如何使用吧。

引入配置

pages.json文件中找到需要下拉刷新的页面中加入以下配置。

json 复制代码
{
  "path": "pages/index/pull-refresh",
  "style": {
    "navigationBarTitleText": "下拉刷新",
    "enablePullDownRefresh": true
  }
}

可以在 APP 端自定义样式,在enablePullDownRefresh下面添加如下配置:

json 复制代码
{
  //...
  "app-plus": {
    "pullToRefresh": {
      "support": true,
      "color": "#24afd6",
      "style": "circle"
    }
  }
  // ...
}

页面引入

js 复制代码
import { onPullDownRefresh } from "@dcloudio/uni-app";

监听下拉刷新

js 复制代码
// 监听下拉刷新
onPullDownRefresh(() => {
  // 开始下拉刷新
  uni.startPullDownRefresh();
  // 获取数据
  getData();
});

停止下拉刷新

js 复制代码
// 获取数据
function getData() {
  console.log("获取数据!");
  setTimeout(() => {
    uni.stopPullDownRefresh();
  }, 3000);
}

案例展示

自定义组件

  • h5 端效果
  • 小程序端效果
  • APP 端效果

内置下拉刷新

  • h5 端效果
  • 小程序端效果
  • APP 端效果

最后

以上就是自定义下拉刷新组件的主要内容,有不足之处,请多多指正。

相关推荐
Json_1817901448013 分钟前
电商拍立淘按图搜索API接口系列,文档说明参考
前端·数据库
风尚云网36 分钟前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网
木子020439 分钟前
前端VUE项目启动方式
前端·javascript·vue.js
GISer_Jing41 分钟前
React核心功能详解(一)
前端·react.js·前端框架
捂月44 分钟前
Spring Boot 深度解析:快速构建高效、现代化的 Web 应用程序
前端·spring boot·后端
深度混淆1 小时前
实用功能,觊觎(Edge)浏览器的内置截(长)图功能
前端·edge
Smartdaili China1 小时前
如何在 Microsoft Edge 中设置代理: 快速而简单的方法
前端·爬虫·安全·microsoft·edge·社交·动态住宅代理
秦老师Q1 小时前
「Chromeg谷歌浏览器/Edge浏览器」篡改猴Tempermongkey插件的安装与使用
前端·chrome·edge
滴水可藏海1 小时前
Chrome离线安装包下载
前端·chrome
endingCode1 小时前
45.坑王驾到第九期:Mac安装typescript后tsc命令无效的问题
javascript·macos·typescript