zanui的使用

1、下载后的项目根目录:
zanui的使用_第1张图片

2、
把dist目录放在项目的根目录下,并把zanui实例中的componets放在根目录下
zanui的使用_第2张图片

3、
在app.wxss中引入index.wxss样式
这里写图片描述

4、
.wxml
去实例中找样式,复制适当的进行改变

<doc-page title="CAPSULE" without-padding>

  <zan-panel without-border>
    <zan-card card-class="test-card" thumb="https://img.yzcdn.cn/upload_files/2016/11/25/FpqPXlrMRjKwJs8VdTu3ZDJCj4j5.jpeg?imageView2/2/w/200/h/200/q/90/format/jpeg" price="999.99" title="红烧牛肉【虚拟商品】【有库存】【有sku】" num="2" desc="3000克 50%" status="已发货">
    </zan-card>
  </zan-panel>

</doc-page>

在.json中

{
  "navigationBarTitleText": "Card 卡片",
  "usingComponents": {
    "zan-card": "../../dist/card/index",
    "zan-panel": "../../dist/panel/index",
    "doc-page": "../../components/doc-page/index"
  }
}

样式:
zanui的使用_第3张图片

你可能感兴趣的:(微信小程序)