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-weapp2.把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.jsvar 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.jsconst 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” }}
微信小程序前端UIzanUI的使用总结
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序前端UIzanUI的使用总结
最新评论
独特万商直播系统,直播系统技术开发公司
万商直播系统开发公司
优秀的团队,万商直播管理系统
不错的小程序案例
优秀的团队,不错的服务!
讲的很好
主播长的帅气
好系统好服务