美文网首页
uni-app之scroll的triggered作用

uni-app之scroll的triggered作用

作者: JxSr程知农 | 来源:发表于2020-12-03 16:10 被阅读0次

    关于 uni-app之scroll 的 下拉刷新 和 上拉加载,理解其中triggered的作用。

    <template>
        <view class="base_box">
            <scroll-view class="scroll_box" scroll-y :refresher-triggered="triggered" :refresher-enabled="true" @refresherrefresh="onRefreshPage"
             refresher-background="#666666" @scrolltolower="onRequestMore" @refresherrestore="onRestore">
                <view v-if="dataList.length > 0" class="list_box">
                    <view class="list_item" v-for="(item, i) in dataList" :key="i">
                        <text style="color: #333333;">{{'--- --- ' + i + ' --- ---'}}</text>
                    </view>
                    <view style="width: 710rpx;height: 60rpx; line-height: 60rpx;text-align: center;color: #333333;">{{loadStatus}}</view>
                </view>
                <view v-if="dataList.length == 0" class="list_box_none">
                    <view class="data-none">
                        <!-- <image src="/static/images/none.jpg" mode="aspectFill"></image> -->
                    </view>
                </view>
            </scroll-view>
        </view>
    </template>
    
    <script>
        export default {
            data() {
                return {
                    dataList: [],
                    pageInfo: {
                        /* totalCount 总项数 */
                        // totalCount: 0,
                        /* pageCount 总页数 */
                        // pageCount: 0,
                        /* pageSize 一页请求的项数 */
                        pageSize: 10,
                        /* currPageIndex 当前页码: 若从1开始 则赋值为0;若从0开始 则赋值为-1 ... */
                        currPageIndex: 0,
                    },
                    /* triggered的作用:
                      (1) true -> false  此时若scroll存在顶部偏移,则可触发偏移消失。
                      (2) false -> true  此时若scroll没有顶部偏移,则可触发偏移出现以及下拉刷新事件。 */
                    triggered: false,
                    /* loadStatus的取值: loadmore \ onmore */
                    loadStatus: "loadmore",
                };
            },
            onLoad(option) {
                console.log("track_onLoad.");
                // this._freshing = false; // I think it should be deleted.
                setTimeout(() => {
                    console.log("track_onLoad_2.");
                    this.triggered = true;
                }, 200);
            },
            onShow() {},
            computed: {},
            methods: {
                onRestore() {
                    console.log("track_onRestore.");
                },
                onRefreshPage() {
                    console.log("track_onRefreshPage.");
                    if (this._freshing) {
                        return;
                    }
                    console.log("track_onRefreshPage_1.");
                    this._freshing = true;
                    if (!this.triggered) {
                        this.triggered = true;
                    }
                    this.pageInfo.currPageIndex = 0;
                    this.requestDataList(() => {
                        this.triggered = false;
                        this._freshing = false;
                    });
                },
                onRequestMore() {
                    console.log("track_onRequestMore.");
                    if (this._freshing) {
                        return;
                    }
                    console.log("track_onRequestMore_1.");
                    this._freshing = true;
                    this.requestDataList(() => {
                        this._freshing = false;
                    });
                },
                async requestDataList(callback) {
                    console.log("track_requestDataList.");
                    let cachePageIndex = this.pageInfo.currPageIndex + 1;
                    // 利用 延迟执行 模拟 数据请求过程。
                    setTimeout(() => {
                        if (cachePageIndex - this.pageInfo.currPageIndex == 1) {
                            console.log("track_requestDataList_data_ok.");
    
                            // 模拟处理数据。
                            if (1 == cachePageIndex) {
                                this.dataList = [];
                            }
                            this.dataList = this.dataList.concat([{}, {}, {}, {}, {}, {}]);
    
                            this.pageInfo.currPageIndex = cachePageIndex;
                        } else {
                            console.log("track_requestDataList_data_discard.");
                        }
                        if (typeof callback == 'function') {
                            callback();
                        }
                        console.log("track_requestDataList_end.");
                    }, 6000);
                    console.log("track_requestDataList_1.");
                },
            }
        };
    </script>
    
    <style>
        .base_box {
            padding-top: 168rpx;
            background-color: #F7F7F7;
        }
    
        .scroll_box {
            width: 750rpx;
            height: 960rpx;
            background-color: #EEEEEE;
        }
    
        .list_box {
            width: 750rpx;
        }
    
        .list_item {
            margin: 20rpx 20rpx 0rpx 20rpx;
            width: 710rpx;
            height: 300rpx;
            background-color: #999999;
        }
    </style>
    
    

    参考链接: https://blog.csdn.net/qq_40666120/article/details/108284680

    相关文章

      网友评论

          本文标题:uni-app之scroll的triggered作用

          本文链接:https://www.haomeiwen.com/subject/jxgmwktx.html