黑马小程序商城实战
2020-03-24 本文已影响0人
随风飞2019
//首页商品列表部分页面
<block wx:for="{{goods}}" wx:key="_openid">
<navigator url="/pages/detail/detail?id={{item._id}}">
<van-card num="{{item.count}}" price="{{item.price}}" title="{{item.title}}" thumb="{{ item.imageSrc }}">
<view slot="footer">
<van-button size="mini" catchtap="buy" data-item="{{item}}">下单</van-button>
</view>
</van-card>
</navigator>
</block>
特别注意,跳转详情页的写法
<navigator url="/pages/detail/detail?id={{item._id}}">
下单传参的写法
<van-button size="mini" catchtap="buy" data-item="{{item}}">下单</van-button>
这里因为整块加了跳转连接,只能使用catchtap捕获方式绑定时间,不会冒泡,不会跳转到详情页
//首页逻辑,包括渲染数据,上拉加载,下拉刷新
const db=wx.cloud.database();
const goods_col = db.collection("goods");
Page({
data:{
goods:[],
page:0,
hasMore:true,
},
getGoodsList(){
let LIMIT = 5;
goods_col.limit(LIMIT).skip(this.data.page*LIMIT).get().then(res=>{
wx.stopPullDownRefresh();
if (!this.data.hasMore){
console.log("没有数据了");
return
}
this.setData({
goods: [...this.data.goods, ...res.data],
page: ++this.data.page,
hasMore: res.data.length === LIMIT
})
})
},
onLoad(){
this.getGoodsList()
},
onReachBottom(){
this.getGoodsList();
console.log(this.data.page)
},
onPullDownRefresh(){
this.setData({
page: 0,
hasMore: true,
goods: [],
})
this.getGoodsList();
}
})
//详情页页面
<van-cell title="{{item.title}}" value="{{item.price}}" label="访问量:{{item.count}}" />
//详情页逻辑
<navigator url="/pages/detail/detail?id={{item._id}}">
onLoad(e) {
this.getItem(e.id) //进来需要通过传进来的参数id,请求数据库
}
还需要把访问量+1
async getItem(val) {
let temp = goods_col.doc(val);
await temp.update({
data: {
count: db.command.inc(1)
}
});
let {data} = await temp.get();
this.setData({
item: data
});
},
await temp.update是重点,数据库访问量+1的部分