微信小程序开发者的福利来了,这里提供了一套高颜值,超好用、易扩展的微信小程序UI库,还不快快来领。概述

ZanUI-WeApp是有赞移动 Web UI 规范 ZanUI 的小程序现实版本,结合了微信的视觉规范,为用户提供更加统一的使用感受。

包含 badge、btn、card、cell、color、dialog、form、helper、icon、label、loadmore、panel、quantity、steps、tab、toast、toptip 共计 17 类组件或元素。

预览

打开微信web开发者工具,'本地小程序项目 - 添加项目',把 zanui-weapp 添加进去就可以查看组件源码、预览示例demo了。

zan1.png

使用

我们推荐在你的app.wxss直接引入zanui-weapp/dist/index.wxss。

根据功能的不同,可以将组件大致的分为4类:

1. 简单组件

如按钮组件,只要按照wxml结构写就好了

<!-- example/btn/index.html --><view class="zan-btn">按钮</view>

zan2.png

2. 复杂组件

如加载更多组件,需要先引入定义好的模版,然后给模版传递数据

[AppleScript] 纯文本查看 复制代码
<!-- example/loadmore/index.html -->

<!-- 引入组件模版 -->
<import src="path/to/zanui-weapp/dist/loadmore/index.wxml" />

<!-- 加载中 -->
<template is="zan-loadmore" data="{{loading: true}}" />

<!-- 一条数据都没有 -->
<template is="zan-loadmore" data="{{nodata: true}}" />

<!-- 没有更多数据了 -->
<template is="zan-loadmore" data="{{nomore: true}}" />

zan3.png

3. 带事件回调的组件

如数量选择组件,需要先引入模版,然后给模版传递数据

[AppleScript] 纯文本查看 复制代码
<!-- example/quantity/index.html -->

<import src="path/to/zanui-weapp/dist/quantity/index.wxml" />

<template is="zan-quantity" data="{{ ...quantity, componentId: 'customId' }}" />

然后通过Zan.Quantity把相关回调注入到页面中

[AppleScript] 纯文本查看 复制代码
// example/quantity/index.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
    });
  }
}));

zan4.png

4. API类组件

如Toast组件,需要先引入模版,并在页面上使用。

注意zanToast这个数据也是通过Zan.Toast注入到页面的
[AppleScript] 纯文本查看 复制代码
<!-- example/toast/index.html -->

<import src="path/to/zanui-weapp/dist/toast/index.wxml" />

<view bindtap="showToast">显示toast</view>

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

将API注入到页面后,就可以通过this来直接调用相应的API了

[AppleScript] 纯文本查看 复制代码
<!-- example/toast/index.js -->

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

Page(Object.assign({}, Zan.Toast, {
  showToast() {
    this.showZanToast('toast的内容');
  }
}));

zan5.png

更多示例可以在项目的example目录中查看



下载地址:

游客,如果您要查看本帖隐藏内容请回复




分享到 :
5 人收藏

65 个回复

倒序浏览
stardew  小程序大虾 | 2017-2-25 19:00:33
感谢楼主分享,下载下来看看。
沉浮  小程序菜鸟 | 2017-2-28 09:58:05
感谢分享,用着看看效果!
ygaini  小程序菜鸟 | 2017-3-9 11:24:53
很不错啊,呵呵
icey830  小程序菜鸟 | 2017-3-9 22:51:04
好像不错哦
yangenius  小程序菜鸟 | 2017-3-21 14:00:17
试试看看
VIP  小程序菜鸟 | 2017-4-1 09:55:42
支持一下
anji20  小程序菜鸟 | 2017-4-8 17:03:06
氨基0ya望闻问切
jiawin  小程序菜鸟 | 2017-4-13 10:10:08
楼主好人
xuemumu  小程序菜鸟 | 2017-4-17 13:31:38
很给力哈很给力哈很给力哈很给力哈很给力哈很给力哈
您需要登录后才可以回帖 登录 | 朕要注册

本版积分规则

QQ|手机版|51小程序,合作QQ: 2826431922 ( 苏ICP备15027371号 )

Powered by Discuz! X3.2

返回顶部