uniapp 下拉刷新-蒲公英云

uniapp 下拉刷新

全局开启
pages.json中->globalStyle
    "enablePullDownRefresh":true,
单页面开启
pages.json->pages的数组中->对应页面内
    "style":{
            "enablePullDownRefresh":true,
        }
通过回调开启
    在配置了页面下拉刷新后,除了可以滑动开启外
    在回调函数中
        uni.startPullDownRefresh();
结束下拉刷新
    uni.stopPullDownRefresh();
监听上拉刷新生命周期函数
    onPullDownRefresh

下拉刷新

代码示例:

<template>
    <view>
        <view class='box'>
            { { msg}}
        </view>
        <text class='iconfont icon-shipin '></text>
        <text class='iconfont'></text>
        <text v-if="true" v-html="hhh">wwww</text>
        <button type="primary" @click="get">按钮</button>
        <view v-for="(item,index) in list" :key="index">
            <view>{ { item}}</view>
        </view>
    </view>
</template>
<script>
export default{ 
    data()
    { 
        return{ 
            msg:'数据',
            hhh:'ww',
            list:[1,2,3,4,5,6,7,8]
        }
    },
    onPullDownRefresh()
    { 
        this.list.push(9);
        uni.stopPullDownRefresh();
    },
    methods:{ 
        get()
        { 
            uni.startPullDownRefresh();
        }
    },
}
</script>
<style scoped>
    @import url("../css/a.css");
    .box{ 
        height: 375rpx;
        width: 375rpx;
        background-color: #4CD964;
    }
    .box1{ 
        background-color: #007AFF;
    }
</style>

pages.json:

{ 
    "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
        { 
            "path": "pages/message/message",
            "style": { 
                "navigationBarTitleText": "study1",
                "backgroundColor":"#4CD964",
                "h5":{ 
                    "pullToRefresh":{ 
                        "color":"#007AFF",
                        "offset":"20%"
                    }
                },
                "enablePullDownRefresh":true
            }
        },
        { 
            "path": "pages/index/index",
            "style": { 
                "navigationBarTitleText": "uni-app"
            }
        },
        { 
            "path": "pages/me/me",
            "style": { 
                "navigationBarTitleText": "me"
            }
        },
        { 
            "path": "pages/detail/detail",
            "style": { 
                "navigationBarTitleText": "detail"
            }
        }
    ],
    "globalStyle": { 
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "uni-appaa",
        "navigationBarBackgroundColor": "#008000",
        "backgroundColor": "#008000",
        "backgroundTextStyle":"light",
        "onReachBottomDistance":100
    },
    "tabBar":{ 
        "list":[
            { 
                "text":"首页",
                "pagePath":"pages/index/index",
                "iconPath":"static/tabs/home.png",
                "selectedIconPath":"static/tabs/home-active.png"
            },
            { 
                "text":"信息",
                "pagePath":"pages/message/message",
                "iconPath":"static/tabs/message.png",
                "selectedIconPath":"static/tabs/message-active.png"
            },
            { 
                "text":"我的",
                "pagePath":"pages/me/me",
                "iconPath":"static/tabs/contact.png",
                "selectedIconPath":"static/tabs/contact-active.png"
            }
        ],
        "color":"#9CDCFE",
        "selectedColor":"#008000",
        "backgroundColor":"#272822",
        "borderStyle":"white"
    },
    "condition":{ 
        "current":0,
        "list":[
            { 
                "name":"详情页",
                "path":"pages/detail/detail",
                "query":"id=80"
            }
        ]
    }
}