refresh

概述

下拉刷新容器。

使用限制

子组件

支持

属性

除了支持 通用属性 以外，还支持如下属性。

样式

除了支持 通用样式 以外，还支持如下样式。

事件

低于1040版本不支持click事件，touch事件和longpress事件。除了支持 通用事件 以外，还支持如下事件。

示例代码

refresh界面不移动

<template>
    <div class="container">
        <!-- 属性refreshing用于标识refresh组件的加载状态 -->
        <refresh class="refresh" onrefresh="refresh" refreshing="{{isRefreshing}}" offset=800px type="pulldown" enable-refresh="{{enableRefresh}}">
            <div class="page-title-wrap">
                <text class="page-title ">{{componentName}}</text>
            </div>
            <div class="item-container">
                <input class="btn" type="button" value="{{$t('message.component.refresh.stopRefresh')}}"  onclick="stopRefresh" />
            </div>
            <div class="item-container">
                <input class="btn" type="button" value="enable refresh" onclick="isEnableRefresh"/>
            </div>
        </refresh>
    </div>
</template>
<style>
    @import '../Common/css/common.css';
    .refresh {
        background-color: #FFFFFF;
        progress-color: #0faeff;
        flex-direction: column;
        flex: 1;
    }
    .item-container {
        margin-bottom: 50px;
        margin-right: 60px;
        margin-left: 60px;
        flex-direction: column;
    }
</style>
<script>
    import prompt from '@system.prompt'
    export default {
        data: {
            componentName: 'refresh',
            isRefreshing: false,
            enableRefresh :true
        },
        onInit() {
            this.$page.setTitleBar({ text: 'refresh' })
        },
        refresh: function (e) {
            prompt.showToast({
                message:this.$t('message.component.refresh.refreshing')
            })
            var that = this;
            // 更新刷新状态（属性refreshing的值从false改为true会触发refresh组件的状态更新，反之亦然）
            that.isRefreshing = e.refreshing;
            setTimeout(function () {
                // 关闭刷新状态
                that.isRefreshing = false;
                prompt.showToast({
                    message:that.$t('message.component.refresh.refreshComplete')
                })
            }, 3000)
        },
       isEnableRefresh :function() {
           this.enableRefresh = !this.enableRefresh
           prompt.showToast({
           message:this.enableRefresh
           })
        },
        stopRefresh: function () {
            this.isRefreshing = false;
        }
    }
</script>

示例代码效果图：

refresh界面移动

<template>
    <div>
        <!-- 属性refreshing用于标识refresh组件的加载状态 -->
        <refresh onrefresh="refresh" refreshing="{{isRefreshing}}" offset=800px type = "overscroll">
            <div>
                <text class="page-title ">{{componentName}}</text>
            </div>
            <div>
                <input type="button" value="停止刷新" onclick="stopRefresh" />
            </div>
        </refresh>
    </div>
</template>
<style>
    @import '../Common/css/common.css';
    .refresh {
        background-color: #FFFFFF;
        progress-color: #0faeff;
        flex-direction: column;
        flex: 1;
    }
    .item-container {
        margin-bottom: 50px;
        margin-right: 60px;
        margin-left: 60px;
        flex-direction: column;
    }
</style>
<script>
    import prompt from '@system.prompt'
    export default {
        data: {
            componentName: 'refresh',
            isRefreshing: false,
        },
        onInit() {
            this.$page.setTitleBar({ text: 'refresh' })
        },
        refresh: function (e) {
            prompt.showToast({
                message: '刷新中.....'
            })
            var that = this;
            // 更新刷新状态（属性refreshing的值从false改为true会触发refresh组件的状态更新，反之亦然）
            that.isRefreshing = e.refreshing;
            setTimeout(function () {
                // 关闭刷新状态
                that.isRefreshing = false;
                prompt.showToast({
                    message: '刷新完成'
                })
            }, 3000)
        },
        stopRefresh: function () {
            this.isRefreshing = false;
        },
    }
</script>

示例代码效果图：

refresh（包含list）界面不移动

<template>
    <div>
        <!-- 属性refreshing用于标识refresh组件的加载状态 -->
        <refresh onrefresh="refresh" refreshing="{{isRefreshing}}" offset=800px type="material">
            <div>
                <text class="page-title ">{{componentName}}</text>
            </div>
            <div>
                <input type="button" value="停止刷新" onclick="stopRefresh" />
            </div>
            <!-- 列表 -->
            <list onscrollbottom="scrollbottom" onscrolltop="scrolltop" onscroll="scroll" id="list" scrollpage="{{scrollPage}}">
                <!-- 列表元素，属性type值相同时，需要确保渲染后的视图布局也完全相同，用show代替if，确保布局视图不变 -->
                <list-item type="listItem" class="item item-color" for="{{listData}}">
                    <text>{{$item}}--{{$idx}}</text>
                </list-item>
                <!-- 加载更多 -->
                <list-item type="loadMore" if="{{loadMore}}">
                    <progress type="circular"></progress>
                    <text>加载更多</text>
                </list-item>
            </list>
        </refresh>
    </div>
</template>
<style>
    @import '../Common/css/common.css';
    .refresh {
        background-color: #FFFFFF;
        progress-color: #0faeff;
        flex-direction: column;
        flex: 1;
    }
    .item-container {
        margin-bottom: 50px;
        margin-right: 60px;
        margin-left: 60px;
        flex-direction: column;
    }
    .list {
        flex-direction: column;
        flex: 1;
        padding-left: 60px;
        padding-right: 60px;
        columns: 4;
        border-color: #FF0000;
        border-width: 5px;
    }
    .item {
        height: 150px;
        align-items: flex-start;
        margin-bottom: 15px;
        border-color: #9400D3;
        border-width: 5px;
        margin-right: 20px;
    }
    .load-more {
        justify-content: center;
        align-items: center;
        height: 100px;
        border-color: #bbbbbb;
        border-bottom-width: 1px;
    }
    .item-color {
        background-color: #f76160;
    }
</style>
<script>
    import prompt from '@system.prompt'
    export default {
        data: {
            componentName: 'refresh',
            isRefreshing: false,
            loadMore: true,
            listAdd: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
            listData: [],
            scrollPage: false,
            showListBtn: true,
            listClass: 'selected',
            arrayClass: '',
        },
        onInit() {
            this.$page.setTitleBar({ text: 'refresh' })
            // 初始化列表数据
            this.listData = [].concat(this.listAdd);
        },
        refresh: function (e) {
            prompt.showToast({
                message: '刷新中.....'
            })
            var that = this;
            // 更新刷新状态（属性refreshing的值从false改为true会触发refresh组件的状态更新，反之亦然）
            that.isRefreshing = e.refreshing;
            setTimeout(function () {
                // 关闭刷新状态
                that.isRefreshing = false;
                prompt.showToast({
                    message: '刷新完成'
                })
            }, 3000)
        },
        stopRefresh: function () {
            this.isRefreshing = false;
        },
        scrollbottom: function () {
            prompt.showToast({
                message: '到底部了'
            })
            // 加载下一页
            var that = this;
            var renderData = [].concat(that.listData, that.listAdd);
            setTimeout(function () {
                that.listData = renderData;
            }, 1000)
        },
        scrolltop: function () {
            prompt.showToast({
                message: '在最顶部了'
            })
        },
        //滑动过程 中的监听
        scroll: function (e) {
            let msg = "滑动中.scrollX:" + e.scrollX
                + " .scrollY:" + e.scrollY
                + " .scrollState:" + e.scrollState;
            console.info(msg);
        }
    }
</script>

示例代码效果图：

refresh（包含list）界面移动

<template>
    <div>
        <!-- 属性refreshing用于标识refresh组件的加载状态 -->
        <refresh onrefresh="refresh" refreshing="{{isRefreshing}}" offset=800px type="overscroll">
            <div>
                <text class="page-title ">{{componentName}}</text>
            </div>
            <div>
                <input type="button" value="停止刷新" onclick="stopRefresh" />
            </div>
            <!-- 列表 -->
            <list onscrollbottom="scrollbottom" onscrolltop="scrolltop" onscroll="scroll" id="list" scrollpage="{{scrollPage}}">
                <!-- 列表元素，属性type值相同时，需要确保渲染后的视图布局也完全相同，用show代替if，确保布局视图不变 -->
                <list-item type="listItem" class="item item-color" for="{{listData}}">
                    <text>{{$item}}--{{$idx}}</text>
                </list-item>
                <!-- 加载更多 -->
                <list-item type="loadMore" if="{{loadMore}}">
                    <progress type="circular"></progress>
                    <text>加载更多</text>
                </list-item>
            </list>
        </refresh>
    </div>
</template>
<style>
    @import '../Common/css/common.css';
    .refresh {
        background-color: #FFFFFF;
        progress-color: #0faeff;
        flex-direction: column;
        flex: 1;
    }
    .item-container {
        margin-bottom: 50px;
        margin-right: 60px;
        margin-left: 60px;
        flex-direction: column;
    }
    .list {
        flex-direction: column;
        flex: 1;
        padding-left: 60px;
        padding-right: 60px;
        columns: 4;
        border-color: #FF0000;
        border-width: 5px;
    }
    .item {
        height: 150px;
        align-items: flex-start;
        margin-bottom: 15px;
        border-color: #9400D3;
        border-width: 5px;
        margin-right: 20px;
    }
    .load-more {
        justify-content: center;
        align-items: center;
        height: 100px;
        border-color: #bbbbbb;
        border-bottom-width: 1px;
    }
    .item-color {
        background-color: #f76160;
    }
</style>
<script>
    import prompt from '@system.prompt'
    export default {
        data: {
            componentName: 'refresh',
            isRefreshing: false,
            loadMore: true,
            listAdd: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
            listData: [],
            scrollPage: false,
            showListBtn: true,
            listClass: 'selected',
            arrayClass: '',
        },
        onInit() {
            this.$page.setTitleBar({ text: 'refresh' })
            // 初始化列表数据
            this.listData = [].concat(this.listAdd);
        },
        refresh: function (e) {
            prompt.showToast({
                message: '刷新中.....'
            })
            var that = this;
            // 更新刷新状态（属性refreshing的值从false改为true会触发refresh组件的状态更新，反之亦然）
            that.isRefreshing = e.refreshing;
            setTimeout(function () {
                // 关闭刷新状态
                that.isRefreshing = false;
                prompt.showToast({
                    message: '刷新完成'
                })
            }, 3000)
        },
        stopRefresh: function () {
            this.isRefreshing = false;
        },
        scrollbottom: function () {
            prompt.showToast({
                message: '到底部了'
            })
            // 加载下一页
            var that = this;
            var renderData = [].concat(that.listData, that.listAdd);
            setTimeout(function () {
                that.listData = renderData;
            }, 1000)
        },
        scrolltop: function () {
            prompt.showToast({
                message: '在最顶部了'
            })
        },
        //滑动过程 中的监听
        scroll: function (e) {
            let msg = "滑动中.scrollX:" + e.scrollX
                + " .scrollY:" + e.scrollY
                + " .scrollState:" + e.scrollState;
            console.info(msg);
        }
    }
</script>

示例代码效果图：

版本更新说明

相关链接

[h2]案例

• 使用refresh组件，无法被其包裹的子组件（div）自动撑开
• refresh组件作为父组件时，子组件宽度显示异常