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

云开发（微信-小程序）笔记（九）----云存储，你来了（下）

刷新动画

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.js
Page({
  //请求商品信息
  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;
}

效果图如下

云开发（微信-小程序）笔记（十一）---- 分页，不简单啊

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