はじめに: 日々の開発プロセスでは、ツアーのコンテンツを更新するのに非常に便利なプルダウン更新シナリオに遭遇することがよくありますが、ここではプルダウン更新用のカスタム コンポーネントも実装しました。
目次
- 準備
- 原理分析
- コンポーネントの実装
- 実践的な演習
- 内蔵リフレッシュ
- ケースディスプレイ
準備
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 エンドエフェクト
-
ミニプログラムエフェクト
-
アプリの副作用
組み込みのプルダウン更新
-
h5 エンドエフェクト
-
ミニプログラムエフェクト
-
アプリの副作用
やっと
以上がカスタムプルダウン更新コンポーネントの主な内容ですが、不備がございましたらご指摘ください。