uni-app的下拉刷新实战

曾经终败给现在 2021-07-24 16:57 449阅读 0赞

**目录**

一 下拉刷新说明

二 下拉刷新实战

1 修改 pages.json

2 新建 list.vue

3 效果

三 上拉加载说明

四 上拉加载实战

1 修改 list.vue

2 修改 pages.json

3 效果

--------------------

# 一 下拉刷新说明 #

onPullDownRefresh：监听用户下拉动作，一般用于下拉刷新。

有两种方式触发下拉刷新。

*  需要在 pages.json 里，找到的当前页面的pages节点，并在 style 选项中开启 enablePullDownRefresh。
 *  uni.startPullDownRefresh(OBJECT):开始下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。

当处理完数据刷新后，uni.stopPullDownRefresh 可以停止当前页面的下拉刷新。

# 二 下拉刷新实战 #

## 1 修改 pages.json ##

{
        "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
            {
                "path": "pages/list/list",
                "style":{
                    "enablePullDownRefresh": true
                }
            },
            {
                "path": "pages/index/index"
            },
            {
                "path":"pages/home/home"
            },
            {
                "path": "pages/uni-style/uni-style"
            },
            {
                "path": "pages/message/message",
                "style":{
                    "navigationBarTitleText":"信息页",
                    "navigationBarBackgroundColor":"#007AFF",
                    "h5":{
                        "pullToRefresh":{
                            "color":"#7D26CD"
                        }
                    }
                }
            },
            {
                "path": "pages/contact/contact"
            },
            {
                "path": "pages/detail/detail"
            }
        ],
        "globalStyle": {
            "navigationBarTextStyle": "white",
            "navigationBarTitleText": "绿帽子",
            "navigationBarBackgroundColor": "#7FFF00",
            "backgroundColor": "#7CCD7C",
            "backgroundTextStyle":"light"
        },
        "tabBar":{
            "color":"#F0AD4E",
            "selectedColor":"#4CD964",
            "backgroundColor":"#007AFF",
            "borderStyle":"black",
            "list":[
                {
                    "text":"首页",
                    "pagePath":"pages/index/index",
                    "iconPath":"static/tabs/1237644.png",
                    "selectedIconPath":"static/tabs/1237719.png"
                },
                {
                    "text":"信息页",
                    "pagePath":"pages/message/message",
                    "iconPath":"static/tabs/1246271.png",
                    "selectedIconPath":"static/tabs/1262419.png"
                },
                {
                    "text":"我们",
                    "pagePath":"pages/contact/contact",
                    "iconPath":"static/tabs/1262419.png",
                    "selectedIconPath":"static/tabs/1289167.png"
                }
            ]
        },
        "condition":{
            "current":0,
            "list":[
                {
                    "name":"详情页",
                    "path":"pages/detail/detail",
                    "query":"id=80"
                }
            ]
        }
    }

## 2 新建 list.vue ##

<template>
        <view>
            <view>这是列表页</view>
            <view v-for="item in list">{
       {item}}</view>
            <button @click="pullDown">下列刷新</button>
        </view>
    </template>
    
    <script>
        export default {
            data() {
                return {
                    list: ['前端', 'java', '测试', 'UI', '大数据']
                }
            },
            onPullDownRefresh() {
                this.list = ['java', '测试', '前端', 'UI', '大数据']
                setTimeout(()=>{
                    uni.stopPullDownRefresh()
                },2000)
                
            },
            methods:{
                pullDown(){
                    uni.startPullDownRefresh()
                }
            }
    
    
        }
    </script>
    
    <style>
    </style>

## 3 效果 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70][]

# 三 上拉加载说明 #

onReachBottom:页面滚动到底部的事件

# 四 上拉加载实战 #

## 1 修改 list.vue ##

<template>
        <view>
            <view>这是列表页</view>
            <view class="box-item" v-for="item in list">{
       {item}}</view>
            
        </view>
    </template>
    
    
    <script>
        export default {
            data() {
                return {
                    list: ['前端', 'java', '测试', 'UI', '大数据', '前端', 'java', '测试', 'UI', '大数据']
                }
            },
            onPullDownRefresh() {
                this.list = ['java', '测试', '前端', 'UI', '大数据']
                setTimeout(() => {
                    uni.stopPullDownRefresh()
                }, 2000)
    
    
            },
            onReachBottom() {
                this.list = [...this.list, ...['java', '测试', '前端', 'UI', '大数据']]
            },
            methods: {
                pullDown() {
                    uni.startPullDownRefresh()
                }
            }
    
    
        }
    </script>
    
    
    <style>
        .box-item {
            height: 100px;
            line-height: 100px;
        }
    </style>

## 2 修改 pages.json ##

{
        "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
            {
                "path": "pages/list/list",
                "style":{
                    "enablePullDownRefresh": true,
                    "onReachBottomDistance":200
                }
            },
            {
                "path": "pages/index/index"
            },
            {
                "path":"pages/home/home"
            },
            {
                "path": "pages/uni-style/uni-style"
            },
            {
                "path": "pages/message/message",
                "style":{
                    "navigationBarTitleText":"信息页",
                    "navigationBarBackgroundColor":"#007AFF",
                    "h5":{
                        "pullToRefresh":{
                            "color":"#7D26CD"
                        }
                    }
                }
            },
            {
                "path": "pages/contact/contact"
            },
            {
                "path": "pages/detail/detail"
            }
        ],
        "globalStyle": {
            "navigationBarTextStyle": "white",
            "navigationBarTitleText": "绿帽子",
            "navigationBarBackgroundColor": "#7FFF00",
            "backgroundColor": "#7CCD7C",
            "backgroundTextStyle":"light"
        },
        "tabBar":{
            "color":"#F0AD4E",
            "selectedColor":"#4CD964",
            "backgroundColor":"#007AFF",
            "borderStyle":"black",
            "list":[
                {
                    "text":"首页",
                    "pagePath":"pages/index/index",
                    "iconPath":"static/tabs/1237644.png",
                    "selectedIconPath":"static/tabs/1237719.png"
                },
                {
                    "text":"信息页",
                    "pagePath":"pages/message/message",
                    "iconPath":"static/tabs/1246271.png",
                    "selectedIconPath":"static/tabs/1262419.png"
                },
                {
                    "text":"我们",
                    "pagePath":"pages/contact/contact",
                    "iconPath":"static/tabs/1262419.png",
                    "selectedIconPath":"static/tabs/1289167.png"
                }
            ]
        },
        "condition":{
            "current":0,
            "list":[
                {
                    "name":"详情页",
                    "path":"pages/detail/detail",
                    "query":"id=80"
                }
            ]
        }
    }

## 3 效果 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70]: /images/20210724/8e9f61e02b2641d9a9ff462b96642fd3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 1]: /images/20210724/d86fd76c51d94e85a3ec064b18d23066.png