ホームページ  >  記事  >  ウェブフロントエンド  >  uniappでプルダウンを有効にする方法

uniappでプルダウンを有効にする方法

藏色散人
藏色散人オリジナル
2021-01-18 11:36:343343ブラウズ

プルダウンを有効にする Uniapp メソッド: 1. Pages.json でプルダウンの更新を有効にする; 2. プルダウンするたびに、「onReachBottom( などのステートメントを使用して) 追加のデータ セットを配列にスローします。」 ){それ = これ...}" とします。

uniappでプルダウンを有効にする方法

このチュートリアルの動作環境: Windows7 システム、uni-app2.5.1 バージョン、Dell G3 コンピューター。

推奨 (無料): uni-app 開発チュートリアル

uniapp はプルアップ読み込みとプルダウン更新を実装します

# #プルダウン更新 onPullDownRefresh

まず、pages.json でプルダウン更新を有効にする必要があります

//在pages.json中找到需要开启的页面. 在style中输入
"enablePullDownRefresh": true,

プルダウン更新をオンにした後、プルダウンプルダウンに対応するページにアニメーションが表示されますが、アニメーションは自動的に閉じないため、手動で閉じてください

onPullDownRefresh () {
    //刷新初始化数据
    this.size = 10
    this.current = 1 
    //调用获取数据的函数
    this.getData() 
    //关闭刷新动画
    setTimeout(function () {
        uni.stopPullDownRefresh() 
    }, 1000)
},

Pull-uploadingonReachBottom

Throw anプルアップするたびに追加のデータセットが配列に追加されます

const SIZE = 10
data(){
return {
size: 10,
current: 1
}
}
//上拉加载函数
onReachBottom(){
    let that = this
    //每次上拉加载的数据比上一次多十个
    that.size += SIZE
    setTimeout(()=>{
        that.getData()
    },1000)
}

以上がuniappでプルダウンを有効にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。