微信小程序前端UI-zanUI的使用总结

ZanUI-WeApp是一个颜值高、好用、易扩展的微信小程序UI库，ZanUI-WeApp结合了微信的视觉规范，为用户提供更加统一的使用感受。包含 badge、btn、card、cell、color、dialog、form、helper、icon、label、loadmore、panel、quantity、steps、tab、toast、toptip 共计 17 类组件或元素

按照功能的不同，主要的组件类型大概分为三类的组件简易的组件、带事件回调的组件、API类组件。

1.先从git上下载下来组件源码包https://github.com/youzan/zanui-weapp

2.把dist文件直接复制到微信小程序的根目录下

3.根据需求引入你需要的组件（具体用法详见example目录下）

微信小程序前端UI-zanUI的使用总结

3.1简单组件

xxx.wxml

<view class="zan-btn">click it</view>  //直接引用按钮的组件

3.2带事件回调的组件(摘自https://cnodejs.org/topic/589d625a5c8036f7019e7a4a)

先引入模板，然后给模板传递数据

xxx.wxml

<import src=".../to/zanui-weapp/dist/quantity/index.wxml" />
<template is="zan-quantity" data="{{ ...quantity, componentId: 'customId' }}" />

xxx.js

var Zan = require('path/to/zanui-weapp/dist/index');

Page(Object.assign({}, Zan.Quantity, {
  data: {
    quantity: {
      quantity: 10,
      min: 1,
      max: 20
    },
  },

  handleZanQuantityChange(e) {
    // 如果页面有多个Quantity组件，则通过唯一componentId进行索引
    var compoenntId = e.componentId;
    var quantity = e.quantity;
    this.setData({
      'quantity.quantity': quantity
    });
  }
}));

微信小程序前端UI-zanUI的使用总结

3.3带事件回调的组件

xxx.js

const Toast = require('../../dist/toast/toast');

Page({
  data: {},

  showToast() {
    Toast.setDefaultOptions({
      selector: '#zan-toast-test'
    });

    Toast('toast的内容');
  },

  showIconToast() {
    Toast({
      type: 'fail',
      message: 'toast的内容',
      selector: '#zan-toast-test'
    });
  },

  showImageToast() {
    Toast({
      message: 'toast的内容',
      selector: '#zan-toast-test',
      image: 'https://b.yzcdn.cn/v2/image/dashboard/secured_transaction/[email protected]'
    });
  },

  showLoadingToast() {
    Toast({
      type: 'loading',
      message: 'toast的内容',
      selector: '#zan-toast-test'
    });
  },

  showOnlyIcon() {
    Toast({
      type: 'fail',
      selector: '#zan-toast-test'
    });
  },

  showEverToast() {
    Toast({
      message: 'toast的内容',
      selector: '#zan-toast-test',
      timeout: -1
    });
  },

  showLoading() {
    Toast.loading({
      message: '加载中',
      selector: '#zan-toast-test'
    });
  }
});

xxx.wxml

<import src="/dist/toast/index.wxml" />

<view class="container">

  <view class="doc-title zan-hairline--bottom">TOAST</view>

  <zan-button-group style="margin-top: 15vh;display: block;">
    <zan-button bind:btnclick="showToast">
      显示toast
    </zan-button>

    <zan-button bind:btnclick="showIconToast">
      显示 Icon 图标的toast
    </zan-button>

    <zan-button bind:btnclick="showImageToast">
      自定义图片作为图标的toast
    </zan-button>

    <zan-button bind:btnclick="showLoadingToast">
      显示 Loading toast
    </zan-button>

    <zan-button bind:btnclick="showOnlyIcon">
      只显示图标的toast
    </zan-button>

    <zan-button bind:btnclick="showEverToast">
      不消失的的toast
    </zan-button>

    <zan-button bind:btnclick="showLoading">
      显示 Loading
    </zan-button>
  </zan-button-group>
</view>

<!-- <template is="zan-toast" data="{{ zanToast }}"></template> -->
<zan-toast id="zan-toast-test"></zan-toast>

xxx.json

{
  "navigationBarTitleText": "Toast 轻提示",
  "usingComponents": {
    "zan-button": "../../dist/btn/index",
    "zan-button-group": "../../dist/btn-group/index",
    "zan-toast": "../../dist/toast/index"
  }
}

微信小程序前端UI-zanUI的使用总结

相关推荐