unicloud29-小案例15 首页下拉刷新onPullDownreFresh

下拉刷新

现在还有一个问题，更新完成的新数据在详情页能自动拿到新的，但是在首页还是旧数据

下拉刷新在uniapp的 教程 $\rightarrow$ 页面 $\rightarrow$ 生命周期函数中

下拉刷新功能需要在pages.json的当前页面节点中开启，在当前页面也可以开启，不开启直接使用是无效的

{
"path": "pages/index/index",
"style": {		
    "navigationBarTitleText": "新闻",
    "enablePullDownRefresh": true
    }
}

开启完成后，在首页中写这个方法，这是一个生命周期方法，与onload、onshow、methods等方法同级

    //下拉刷新
    onPullDownRefresh() {
      console.log(123);
    },

下拉刷新页面后，控制台打印123，表示下拉成功

在下拉刷新方法中，重新调用一次获取网络数据的方法，就实现了下拉刷新，在刷新之前，要将前面获取到的老数据清空，否则数据会展示两遍，出现重复，请求到数据之后，要停止下拉刷新的状态，否则刷新的小图标一直在转（文档在uni的API $\rightarrow$ 界面 $\rightarrow$ 下拉刷新中）

所以停止请求方法应该放在请求网络数据的方法中，放在下拉刷新方法中，调用网络数据请求的方法的后面不合适

<script>
	export default {
		data() {
			return {
        listArr:[]
			}
		},
		onLoad() {
      this.getData()
		},
    // 页面触底事件,来自uniapp页面生命周期方法
    // 页面触底后,调用云函数获取新数据
    // 这个方法写在onload后面,这样,onload是进入页面后的第一次加载数据
     // 而这个方法是用户操作后,页面触底刷新数据
    onReachBottom() {
      this.getData()
    },
    //下拉刷新
    onPullDownRefresh() {
      // 这里调网络数据获取方法之前要将data中的列表清空
      // 否则会出现老数据新数据一起展示,等于数据会展示两遍
      this.listArr=[]
      // 获取网络数据
      this.getData();
    },
		methods: {
      // 点击新闻跳转到详情页
      // e就是标签点击后传过来的id
      goDetail(e){
        console.log(e);
        uni.navigateTo({
          url:"/pages/detail/detail?id="+e
        })
      },
      // 获取数据库列表
      getData(){
        uniCloud.callFunction({
          name:"art_get_all",
          data:{
            skip:this.listArr.length
          }
        }).then(res=>{
          console.log(res);
          // 老的列表数据,就是之前获取到前端的数据
          let oldList = this.listArr;
          // 将新获取的数据和之前获取的数据拼在一个数组里
          // 用展开符才能把他们放在一个一维数组里,否则就是二维数组了
          let nsList = [...oldList, ...res.result.data]
          this.listArr = nsList
          // 结束下拉刷新状态
          uni.stopPullDownRefresh()
        })
      },
      // 点击按钮跳转到新增页面
      goAdd(){
        uni.navigateTo({
          url:"/pages/add/add"
        })
      }
		}
	}
</script>