zoukankan      html  css  js  c++  java
  • 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");
                },                

    完成

  • 相关阅读:
    程序输出小学四则运算表达式,支持真分数四则运算
    自我介绍
    一维数组求最大子数组的和(首位相邻32位)
    一维数组子数组求最大和
    第三周进度条
    第三周总结PSP日志文件
    四则运算<3>单元测试
    四则运算<3>
    30道四则运算<2>单元测试
    构建之法阅读笔记02
  • 原文地址:https://www.cnblogs.com/C-target/p/14681206.html
Copyright © 2011-2022 走看看