微信小程序前端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目录下）

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});}
}));

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/suc_green@2x.png'});},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的使用总结相关推荐

0基础跟着黑马程序员学微信小程序前端开发Day01
学习目录一.项目的基本组成结构二.小程序页面的组成部分三.创建小程序页面四.小程序的一些组件 1.常用视图容器类组件 2.常用基础内容组件 3.button 按钮的基本使用 4.image 组 ...
mysql的数据现实在小程序_使用phpstudy将本地mysql数据显示在微信小程序前端
使用phpstudy将本地mysql数据显示在微信小程序前端第一步:新建小程序在pages文件里新建一个phptest文件夹,如果你不知道操作,建议先学小程序的基础知识第二步:写phptest. ...
微信小程序——前端——抵扣券、优惠券样式
微信小程序--前端--抵扣券.优惠券样式效果图: 实现思路: 左边+划线+右边==使用信息+分割线+使用限制整体底色: .wrapper {margin: 0 auto;width: 100%;d ...
微信小程序前端RSA加解密
开门见山地说,希望各位前端不要搜到这篇文章,因为我总感觉在小程序端去做RSA的加解密总有种脱了裤子放屁多此一举的感觉.但是需求来的时候总是说不准的,接下来我就给大家推荐一种在小程序端比较方便,操作不 ...
(已更新）运势运程小程序v1.2.0 功能模块+微信小程序+前端+后端+新增每日星座卡片
运势运程算命小程序 v1.2.0 完整版+微信小程序+前端+后端运势运程算命小程序开源源码最新更新日志: 新增测算栏目支付成功模版消息提醒,增加留存率.新增每日星座卡片.单向历,请求缓存解决请求慢问 ...
运势运程算命小程序v1.2.0 功能模块+微信小程序+前端+后端+新增每日星座卡片
运势运程算命小程序开源源码最新更新日志: 新增测算栏目支付成功模版消息提醒,增加留存率.新增每日星座卡片.单向历,请求缓存解决请求慢问题.修复测算出生日期开始时间,从 1979 更改为 1918 运势 ...
最新超火毒鸡汤词汇类的微信小程序前端源码
源码介绍: 一款鸡汤类词汇的小程序源码,缺点是没有后台,只有一个前端. 修改说明: app.json文件底部修改小程序APPID index/index.json文件修改小程序名称接口地址为:htt ...
WeApp-Workflow：基于Gulp 的“微信小程序”前端开发工作流
WeApp-Workflow 是我在开发个人微信小程序DeveWork+ 过程中积累总结而来的一个基于Gulp4 的,专门用于开发微信小程序的前端开发工作流.旨在通过自动化的方式解决微信小程序开发过程 ...
微信小程序框架——微信小程序前端开发工具
微信小程序框架框架小程序开发框架的目标是通过尽可能简单.高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务. 框架提供了自己的视图层描述语言 WXML 和 WXSS,以及基于 Java ...
表单－微信小程序前端制作切片演示
小程序前端制作-表单切片,内含服务器端.小程序所有文件.切片文件(可以用小程序切片软件打开再次编辑).效果图内含以下栏目: 新增校园经历组织/公司名称职位开始时间结束时间经历描述资源下载 ...

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

微信小程序前端UI-zanUI的使用总结相关推荐

最新文章

热门文章