最近在学习开发商城微信小程序,在开发商城的时候,我们可能在首页,商品列表页都会遇到商品项的展示,类似京东这种,但没这么复杂:
我将上面的这种商品展示暂且称之为竖向展示。我写过首页和商品列表页之后,发现还有其他页面会用到这种商品展示方式,于是就想将这个鬼东西写成组件,方便使用,顺便也学习一下组件的开发过程。
首先创建一个空模版的小程序,新建一个文件夹叫做component,它长这个样子:
下面来写组件:
组件跟写小程序单页面一样,也是一个文件夹内部包含同名但后缀不同的文件,就不说明了,需要的请看微信文档,讲的很详细,传送门:https://developers.weixin.qq.com/miniprogram/dev/index.html?t=2018413
先在component/vertical-item/index.json里面注册组件,添加如下代码,表示注册组件:
在component/vertical-item/index.wxml文件当中添加wxml代码:
在component/vertical-item/index.wxss文件当中添加样式代码:
.d-shoping-item { width: 350rpx; font-size: 0rpx; display: inline-block; border-radius: 6rpx; } .info{ background: #ffffff; font-size: 24rpx; padding: 10rpx; color: #666666; } .desc{ text-align: left; height: