本文主要是介绍【桂工微拍小程序】商品详情页设计与功能实现,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
1、商品轮播图
1-1、整体流程
1、swiper组件用来放置swiper-item组件
2、swiper-item组件用来放置图片
3、image组件显示轮播图图片
4、wx:for列表循环,设置每一个图片
5、云数据库请求数据完成动态响应
1-2、根据微信开发官方文档来设计商品轮播图
1、从官方文档的组件了找到试图容器里面的swiper组件
![](/upload/202207/22/202207220123591584.png)
2、wxml代码:
`
`
3、样式代码
`
.container{
bottom: 0;
top:0;
left: 0;
right: 0;
position: fixed;
width: 100%;
height: 100%;
background-color: rgb(226, 233, 236);
}
.main{
width: 100%;
height: 93%;
top: 0;
position: absolute;
flex: 1;
border: aqua solid 1px;
}
swiper {
height: 420rpx;
}
swiper-item{
width: 100%;
height: 100%;
}
swiper-item image{
width: 100%;
height: 100%;
}
`
## 1-3、从云数据库获取商品数据(图片)
1、goods.js代码
`
onLoad(options) {
console.log('商品id:',options.goodsid)
let goodsId = options.goodsid
wx.cloud.database().collection('goods').doc(goodsId).get({
success: (res) => {
this.setData({
goodsInfo: res.data
})
console.log('商品详细:',this.data.goodsInfo)
}
})
}
`
这篇关于【桂工微拍小程序】商品详情页设计与功能实现的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!