下拉刷新

下拉刷新是我们在移动端所见的最多效果，所有用户希望看到的最新数据的解决方案基本上都会选择”下拉刷新“方式实现。例如：微信的朋友圈

实现下拉刷新的四步

第一步：json 文件配置下拉刷新

xxxxxxxxxx
{
    "enablePullDownRefresh": true,
    "backgroundColor": "#f1f1f1",
    "backgroundTextStyle":"dark"
}

第二步：实现下拉刷新逻辑

xxxxxxxxxx
Page({
    data: {
        list:[1,2,3,4,5]
    },
    onPullDownRefresh() {
        setTimeout(() =>{
            this.setData({
                list:[6,7,8,9,10]
            })
            wx.stopPullDownRefresh();
        },1000)
    }
})

第三步：渲染视图

xxxxxxxxxx
<view class="root">
    <view wx:for="{{ list }}" wx:key="index">
        <view class="item">{{ item }}</view>
    </view>
</view>

第四步：设计样式

xxxxxxxxxx
page{
    background: #fff;
}
.root{
    padding: 10px;
}
.item{
    width: 100%;
    height: 50px;
    border-bottom: 1px solid #afafaf;
    line-height: 50px;
}

实时效果反馈

1. 在微信小程序中，实现下拉刷新的方法是：

A onShow

B onReachBottom

C onLoad

D onPullDownRefresh

答案

1=>D