标签：桂工微 width 100% 程序 height item 详情页 组件 swiper

1、商品轮播图

1-1、整体流程

1、swiper组件用来放置swiper-item组件
2、swiper-item组件用来放置图片
3、image组件显示轮播图图片
4、wx:for列表循环，设置每一个图片
5、云数据库请求数据完成动态响应

1-2、根据微信开发官方文档来设计商品轮播图

1、从官方文档的组件了找到试图容器里面的swiper组件

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) } }) } `

标签：桂工微,width,100%,程序,height,item,详情页,组件,swiper
来源： https://www.cnblogs.com/lishilin-glut/p/16501576.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。