页面的上拉刷新和下拉加载

前情提要

Page(Object object)，注册小程序的一个页面，该函数接收一个对象类型的参数，该对象包含如下属性：

• onPullDownRefresh，下拉刷新时触发。注意哈，只有在全局配置或者页面配置中开启enablePullDownRefresh时，才会生效，即"enablePullDownRefresh": true。
• onReachBottom，上拉触底时触发

小程序项目

代码涉及的文件有：

1. app.json
2. pages/home/home.wxml
3. pages/home/home.wxss
4. pages/home/home.js

app.json

{
  "pages": [
    "pages/home/home"
  ],
  "window": {
    "navigationBarBackgroundColor": "#0149af",
    "navigationBarTitleText": "首页",
    "navigationBarTextStyle": "white"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

pages/home/home.wxml

<view class="homeContainer">
  <view class="content" wx:for="{{contentList}}" wx:key="{{index}}">{{item}}</view>
</view>

pages/home/home.wxss

.homeContainer{
  padding: 20rpx;
}
.content{
  width: 100%;
  height: 600rpx;
  line-height: 600rpx;
  text-align: center;
  background:#eee;
  color: #1a74f1;
  font-size: 64rpx;
  border-radius: 10rpx;
  margin-bottom: 10rpx;
}

pages/home/home.js

Page({
  data:{
    contentList:[]
  },
  onLoad(){
    const contentList = this.getDataFromServer();
    this.setData({contentList});
  },
  getDataFromServer(){
    let result = ["肯德基宅急送","云海肴","西贝莜面村","眉州东坡","华莱士"];
    return result;
  }, 
  onReachBottom(){
    console.log("on reach bottom");
    console.log("上拉触底，获取数据追加列至列表中");
    const appendData = ["其他","其他","其他","其他","其他"];
    const newContentList = [...this.data.contentList,...appendData];
    this.setData({contentList:newContentList});
  },
  onPullDownRefresh(){
    console.log("on pull down refresh");
    console.log("下拉刷新，获取最新列表数据");
    this.getDataFromServer();
  }
})

相关链接

微信小程序的下拉刷新和上拉触底
scroll-view的下拉刷新和上拉加载（触底）