云开发（微信-小程序）笔记（十）---- 刷新中

刷新动画

https://developers.weixin.qq.com/miniprogram/dev/api/ui/pull-down-refresh/wx.stopPullDownRefresh.html

https://developers.weixin.qq.com/miniprogram/dev/api/ui/pull-down-refresh/wx.startPullDownRefresh.html

编写商品列表的刷新动画

1.编写json文件，开启刷新

{  "usingComponents": {},  "navigationBarTitleText": "商品列表",  "enablePullDownRefresh": true ,  "backgroundColor": "#d3d3d3"}

2.编写js文件

// pages/goods/goods.jsPage({  //请求商品信息  getList(){    wx.cloud.database().collection('Goods').get()    .then(res => {      console.log('请求成功！',res)      wx.stopPullDownRefresh() //停止刷新动画      this.setData({ list: res.data      })    })    .catch(res => {      console.log('请求失败！',res)    })  },  //请求商品数据  onLoad(){    wx.startPullDownRefresh()  //开启刷新动画    this.getList()  },  //监听用户下拉动作，并更新商品信息  onPullDownRefresh: function(){    console.log('下拉刷新监听中！')    //自动开启刷新动画    this.getList()  }

3.编写wxml文件

<view wx:for="{{list}}">    <image src="{{item.img}}" class="img"></image>    <text>商品名：{{item.name}},价格：{{item.price}}</text></view>

4.编写wxss文件

/* pages/goods/goods.wxss */.img{  /*照片的大小*/  width: 300rpx;  height: 200rpx;}

效果图如下

感谢大家，点赞，收藏，关注，评论！