码农之前端

iview weapp的cell slot和列表组合在一起的用法

2019-10-24  本文已影响0人  O人心

如果使用iview组件,需要先在GitHub上下载iview-weapp-master这个文件,将里面的dist这个文件拷贝到项目里

在vivew weapp这个网站上参考文档使用的方法。

这里使用的是列表,把列表里的json代码拷贝到项目中的json文件中

在wxml中,写下下面的代码:

<!-- 列表 -->

  <i-cell-group>

    <i-cell title="收货地址" label="Shipping address" is-link>

      <i-icon type="coordinates" size="20" color="#80848f" slot="icon" />

    </i-cell>

    <i-cell title="咖啡钱包" label="Coffee wallet" value="6 张" is-link>

      <i-icon type="coupons" size="20" color="#80848f" slot="icon" />

    </i-cell>

    <i-cell title="兑换优惠" label="Cash discount" value="1 张" is-link>

      <i-icon type="brush" size="20" color="#80848f" slot="icon" />

    </i-cell>

    <i-cell title="发票管理" label="Invoice management" is-link>

      <i-icon type="accessory" size="20" color="#80848f" slot="icon" />

    </i-cell>

    <i-cell title="客户服务" label="Customer service" is-link>

      <i-icon type="service" size="20" color="#80848f" slot="icon" />

    </i-cell>

  </i-cell-group>

解释:<i-cell title="客户服务" label="Customer service" is-link></i-cell>这是一组没有图标的列表,如果要在列表前面加上图标的话,则需要使用slot(细胞槽)的方式插入,   <i-icon type="service" size="20" color="#80848f" slot="icon" />

顺便附上https://weapp.iviewui.com/components/icon

上一篇下一篇

猜你喜欢

热点阅读