小程序云开发入门——列表下拉刷新

1.准备工作：

新建shuaxin页面，并将之前编写过的有图片的商品列表代码搬过来。（简单回顾一下）

shuaxin.wxml

<view wx:for="{{list}}">
<!--增加点击事件，跳转详情页-->
    <view class="item" bindtap="goDetail" data-id="{{item._id}}">
        <image src="{{item.img}}" class="img"></image>
         <text>商品名： {{item.name}} , 价格： {{item.price}}</text>
    </view>
</view>

shuaxin.wxss

.img{
    width: 200rpx;
    height: 100rpx;
}
.item{
    padding-bottom: 10rpx;
    border-bottom: 1px solid gray;
}

shuaxin.js

Page({
    data:{
        list:[]
    },
    onLoad(){
        this.getList()
    },
    //获取商品列表
    getList(){
        wx.cloud.database().collection('goods')
        .get()
        .then(res=>{
            console.log('商品列表请求成功',res)
            this.setData({
                list:res.data
            })
        })
        .catch(err=>{
            console.error('商品列表请求失败',err)
        })
    },
    //跳转到商品详情页
    goDetail(event){
        //获取ID
        console.log('点击了商品跳转详情的id',event.currentTarget.dataset.id)
        //跳转页面并携带id
        wx.navigateTo({
          url: '/pages/demo1-1/demo1-1?id=' + event.currentTarget.dataset.id,
          //注意，页面前面还有一个斜杠
        })
    }
})

2.在shuaxin.json里设置enablePullDownRefresh属性为true来开启下拉刷新

3.在shuaxin.js里面设置监听下拉刷新

 4.监听到用户下拉动作时重新请求最新数据，修改监听代码

 //页面相关事件处理函数——监听用户下拉动作
    onPullDownRefresh(){
        console.log('下拉刷新的监听')
        wx.cloud.database().collection('goods')
        .get()
        .then(res=>{
            console.log('商品列表请求成功',res)
            this.setData({
                list:res.data
            })
        })
        .catch(err=>{
            console.error('商品列表请求失败',err)
        })
    }

 原来苹果要7元

将苹果价格改为5元，数据库发生改变，但是列表并未发生变化

 下拉刷新后，价格更改成功

 5.更换下拉刷新动画的背景颜色

 6.数据请求成功后停止刷新wx.stopPullDownRefresh()