uni-app自定义简单的下拉刷新

            <scroll-view class="scrollviewCss" :scroll-y="false" :refresher-enabled="true" :refresher-triggered="triggered"
            :refresher-threshold="45" refresher-background="#f8f8f8" @refresherrefresh="onRefresh" @refresherrestore="onRestore"
            @refresherabort="onAbort" @scrolltolower="scrollBottem">
                <!-- 列表信息 -->
                <view class="loginInInfo">
                    <view class="loginInItems" v-for="items in dataList" v-if="dataList.length">
                        <image :src="items.src"  class="imgs" mode=""></image>
                        <view class="loginInPeople">
                            <view class="credentialsType">
                                {{items.type}}
                            </view>
                            <view class="wordsTitle">{{items.name}}
                                <image src="../../static/icon_man.png" v-show="items.sex==1" mode="" class="imgs"></image>
                                <image src="../../static/icon_woman.png" v-show="items.sex==2" mode="" class="imgs"></image>
                            </view>
                            <view class="words">身份证号:{{items.idCard}}</view>
                            <view class="words">所属地区:{{items.unitName}}</view>
                        </view>
                    </view>
                    <view class="listEmpty" v-if="!dataList.length">
                        <image src="../../static/none.png" mode="" class="imgs"></image>
                    </view>
                </view>
                <!-- 加载....没有更多 -->
                <view style="line-height: 60rpx;margin-bottom: 50rpx;">
                    <u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" />
                </view>
            </scroll-view>

用scroll-view组件,要记得给组件设置内容高度

<!-- data里的定义 -->

triggered:true,
status: 'loadmore',
iconType: 'flower',
loadText: {
        loadmore: '轻轻上拉',
    loading: '努力加载中',
    nomore: '拉也没用,没有了'
}

方法

            scrollBottem() {
                this.status = "nomore"
            },
            onRefresh() {
                setTimeout(() => {
                    this.triggered = false;
                }, 2000)
                console.log("进入");
            },
            /* 下拉被复位 */
            onRestore() {
                this.triggered = true; // 需要重置
                console.log("停止");
            },
            /* 下拉被中止,没下拉完就松手就会触发 */
            onAbort() {
                console.log("onAbort");
            },                

完成

原文地址:https://www.cnblogs.com/C-target/p/14681206.html