uniapp專案實踐總結(十六)自定義下拉重新整理元件

發表於2023-09-21
APP元件
導語：在日常的開發過程中，我們經常遇到下拉重新整理的場景，很方便的重新整理遊覽的內容，在此我也實現了一個下拉重新整理的自定義元件。

目錄

  • 準備工作
  • 原理分析
  • 元件實現
  • 實戰演練
  • 內建重新整理
  • 案例展示

準備工作

  • 在components新建一個q-pull資料夾，並新建一個q-pull.vue的元件；
  • 按照前面文章所說的頁面結構，編寫好預定的自定義下拉重新整理元件頁面；

原理分析

自定義下拉重新整理就是在之前自定義滑動觸控元件的基礎上，在頂部增加一個重新整理的模組。

在頁面下拉的時候，判斷是否為下滑的方向，如果是就獲取資料，資料請求完成後，隱藏重新整理模組即可。

元件實現

準備工作和原理分析完成後，接下來寫一個簡單的元件。

模板部分

這部分主要是顯示動畫、提示、顏色、背景色以及控制是否展示頁面。

<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>

樣式部分

.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;
    }
  }
}

指令碼部分

  • 引入依賴
// 匯入依賴
import { reactive } from "vue";

// 頁面屬性

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

// 傳送事件
const emits = defineEmits(["load"]);
  • 開始下拉
function handlerStart(e) {
  let startY = e.touches[0].pageY;
  pullInfo.style = "transition: transform 0s";
}
  • 下拉移動
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)`;
  }
}
  • 下拉結束
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)";
  }
}
  • 復位
function reset() {
  pullInfo.resetTimer = setTimeout(() => {
    pullInfo.tipText = "重新整理成功!";
    pullInfo.resetTimer = setTimeout(() => {
      pullInfo.style = "transform: translateY(0)";
      clearTimeout(pullInfo.resetTimer);
    }, pullInfo.resetTime);
  }, pullInfo.resetTime);
}

實戰演練

模板使用

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

指令碼使用

定義資料

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

載入內容

function loadSet() {
  // 請求資料
  setTimeout(() => {
    let num = Math.random() * 100;
    pull.list.push(num);
    if (proxy.$refs.myPull) {
      proxy.$refs.myPull.reset();
    }
  }, 3000);
}

內建重新整理

uniapp 也為我們開發者準備了內建下拉重新整理，一起去看看如何使用吧。

引入配置

在pages.json檔案中找到需要下拉重新整理的頁面中加入以下配置。

{
  "path": "pages/index/pull-refresh",
  "style": {
    "navigationBarTitleText": "下拉重新整理",
    "enablePullDownRefresh": true
  }
}

可以在 APP 端自定義樣式，在enablePullDownRefresh下面新增如下配置：

{
  //...
  "app-plus": {
    "pullToRefresh": {
      "support": true,
      "color": "#24afd6",
      "style": "circle"
    }
  }
  // ...
}

頁面引入

import { onPullDownRefresh } from "@dcloudio/uni-app";

監聽下拉重新整理

// 監聽下拉重新整理
onPullDownRefresh(() => {
  // 開始下拉重新整理
  uni.startPullDownRefresh();
  // 獲取資料
  getData();
});

停止下拉重新整理

// 獲取資料
function getData() {
  console.log("獲取資料!");
  setTimeout(() => {
    uni.stopPullDownRefresh();
  }, 3000);
}

案例展示

自定義元件

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

內建下拉重新整理

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

最後

以上就是自定義下拉重新整理元件的主要內容，有不足之處，請多多指正。

相關文章