美文网首页码农之前端
iview weapp的cell slot和列表组合在一起的用法

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

作者: O人心 | 来源:发表于2019-10-24 10:51 被阅读0次

如果使用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

相关文章

网友评论

    本文标题:iview weapp的cell slot和列表组合在一起的用法

    本文链接:https://www.haomeiwen.com/subject/qlrrvctx.html