本次展示微信小程序中引用Vant Weapp中的业务组件
Card 商品卡片 参考官方说明
在你编写界面的文件夹中index.json引入组件
“usingComponents”: {
“van-card”: “path/to/vant-weapp/dist/card/index”
}
在这里我改为自己的项目路径;
在index.js中编写算法,获取到云数据库中goods集合的所有数据
在data中,定义初始化数组goodslist:[],用来存储数据
const db = wx.cloud.database({});
const cont = db.collection('goods');
Page({
data: {
goodslist:[]
},
getList: function (data){
var _this = this;
db.collection('goods').get({
success: res => {
this.setData({
goodslist: res.data,
})
}
})
},
onLoad: function (e) {
this.getList()
},
})
在index.wxml前台界面的代码编写,用wx-for是因为有多条数据,需要遍历
<view wx:for="{
{goodslist}}" >
<van-card
price="{
{item.goodsprice}}"
desc="{
{item.goodsdesc}}"
title="{
{item.goodsname}}"
thumb="http://a3.att.hudong.com/74/82/31300542575790140126823620438.jpg"
/>
这样就能简单的完成一个图文列表信息的展示界面
更多组件功能可以参考官方文档:https://youzan.github.io/vant-weapp/#/intro