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
javascript">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.监听到用户下拉动作时重新请求最新数据,修改监听代码
javascript"> //页面相关事件处理函数——监听用户下拉动作
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()