blackteay/vant-weapp
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant-weapp.git synced 2025-04-06 03:58:05 +08:00
Code Issues Projects Releases Wiki Activity

doc: format

Browse Source
This commit is contained in:
Nino 2017-02-08 14:58:52 +08:00
parent ceea48a7b1
commit 6e7d630953
1 changed files with 71 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

142
README.md
View File

@ -26,114 +26,114 @@ cd zanui-weapp
根据功能的不同，可以将组件大致的分为4类： 根据功能的不同，可以将组件大致的分为4类：
1. 简单组件 ### 1. 简单组件
如按钮组件，只要按照wxml结构写就好了 如按钮组件，只要按照wxml结构写就好了
~~~html ~~~html
<!-- example/btn/index.html --> <!-- example/btn/index.html -->
<view class="zan-btn">按钮</view> <view class="zan-btn">按钮</view>
~~~ ~~~
![](https://img.yzcdn.cn/public_files/2017/02/08/1b1e39ed3dc6b63519a68ba1e2650cfc.png) ![](https://img.yzcdn.cn/public_files/2017/02/08/1b1e39ed3dc6b63519a68ba1e2650cfc.png)
2. 复杂组件 ### 2. 复杂组件
如加载更多组件，需要先引入定义好的模版，然后给模版传递数据 如加载更多组件，需要先引入定义好的模版，然后给模版传递数据
~~~html ~~~html
<!-- example/loadmore/index.html --> <!-- example/loadmore/index.html -->
<!-- 引入组件模版 --> <!-- 引入组件模版 -->
<import src="path/to/zanui-weapp/dist/loadmore/index.wxml" /> <import src="path/to/zanui-weapp/dist/loadmore/index.wxml" />
<!-- 加载中 --> <!-- 加载中 -->
<template is="zan-loadmore" data="{{loading: true}}" /> <template is="zan-loadmore" data="{{loading: true}}" />
<!-- 一条数据都没有 --> <!-- 一条数据都没有 -->
<template is="zan-loadmore" data="{{nodata: true}}" /> <template is="zan-loadmore" data="{{nodata: true}}" />
<!-- 没有更多数据了 --> <!-- 没有更多数据了 -->
<template is="zan-loadmore" data="{{nomore: true}}" /> <template is="zan-loadmore" data="{{nomore: true}}" />
~~~ ~~~
![](https://img.yzcdn.cn/public_files/2017/02/08/b96fdc7971577b32915604c5b2c1a3bb.png) ![](https://img.yzcdn.cn/public_files/2017/02/08/b96fdc7971577b32915604c5b2c1a3bb.png)
3. 带事件回掉的组件 ### 3. 带事件回掉的组件
如数量选择组件，需要先引入模版，然后给模版传递数据 如数量选择组件，需要先引入模版，然后给模版传递数据
~~~html ~~~html
<!-- example/quantity/index.html --> <!-- example/quantity/index.html -->
<import src="path/to/zanui-weapp/dist/quantity/index.wxml" /> <import src="path/to/zanui-weapp/dist/quantity/index.wxml" />
<template is="zan-quantity" data="{{ ...quantity, componentId: 'customId' }}" /> <template is="zan-quantity" data="{{ ...quantity, componentId: 'customId' }}" />
~~~ ~~~
然后通过`Zan.Quantity`把相关回掉注入到页面中 然后通过`Zan.Quantity`把相关回掉注入到页面中
~~~js ~~~js
// example/quantity/index.js // example/quantity/index.js
var Zan = require('path/to/zanui-weapp/dist/index'); var Zan = require('path/to/zanui-weapp/dist/index');
Page(Object.assign({}, Zan.Quantity, { Page(Object.assign({}, Zan.Quantity, {
data: { data: {
quantity: { quantity: {
quantity: 10, quantity: 10,
min: 1, min: 1,
max: 20 max: 20
}, },
}, },
handleZanQuantityChange(e) { handleZanQuantityChange(e) {
// 如果页面有多个Quantity组件，则通过componentId来表示唯一 // 如果页面有多个Quantity组件，则通过componentId来表示唯一
var compoenntId = e.componentId; var compoenntId = e.componentId;
var quantity = e.quantity; var quantity = e.quantity;
this.setData({ this.setData({
'quantity.quantity': quantity 'quantity.quantity': quantity
}); });
} }
})); }));
~~~ ~~~
![](https://img.yzcdn.cn/public_files/2017/02/08/b791dfef150b01a7ce1e9aa9e60e0038.png) ![](https://img.yzcdn.cn/public_files/2017/02/08/b791dfef150b01a7ce1e9aa9e60e0038.png)
4. API类组件 ### 4. API类组件
如Toast组件，需要先引入模版，并在页面上使用。 如Toast组件，需要先引入模版，并在页面上使用。
> 注意`zanToast`这个数据也是通过`Zan.Toast`注入到页面的 > 注意`zanToast`这个数据也是通过`Zan.Toast`注入到页面的
~~~html ~~~html
<!-- example/toast/index.html --> <!-- example/toast/index.html -->
<import src="path/to/zanui-weapp/dist/toast/index.wxml" /> <import src="path/to/zanui-weapp/dist/toast/index.wxml" />
<view bindtap="showToast">显示toast</view> <view bindtap="showToast">显示toast</view>
<template is="zan-toast" data="{{ zanToast }}"></template> <template is="zan-toast" data="{{ zanToast }}"></template>
~~~ ~~~
将API注入到页面后，就可以通过`this`来直接调用相应的API了 将API注入到页面后，就可以通过`this`来直接调用相应的API了
~~~js ~~~js
<!-- example/toast/index.js --> <!-- example/toast/index.js -->
var Zan = require('path/to/zanui-weapp/dist/index'); var Zan = require('path/to/zanui-weapp/dist/index');
Page(Object.assign({}, Zan.Toast, { Page(Object.assign({}, Zan.Toast, {
showToast() { showToast() {
this.showZanToast('toast的内容'); this.showZanToast('toast的内容');
} }
})); }));
~~~ ~~~
![](https://img.yzcdn.cn/public_files/2017/02/08/ada80798c88df08060ce96964384e88e.png) ![](https://img.yzcdn.cn/public_files/2017/02/08/ada80798c88df08060ce96964384e88e.png)
更多示例可以在项目的`example`目录中查看 更多示例可以在项目的`example`目录中查看