blackteay/vant-weapp
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant-weapp.git synced 2025-04-05 19:41:45 +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类：
1. 简单组件
### 1. 简单组件
如按钮组件，只要按照wxml结构写就好了
如按钮组件，只要按照wxml结构写就好了
~~~html
<!-- example/btn/index.html -->
~~~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
<!-- example/loadmore/index.html -->
~~~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
<!-- example/quantity/index.html -->
~~~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
// example/quantity/index.js
~~~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, {
data: {
quantity: {
quantity: 10,
min: 1,
max: 20
},
},
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;
handleZanQuantityChange(e) {
// 如果页面有多个Quantity组件，则通过componentId来表示唯一
var compoenntId = e.componentId;
var quantity = e.quantity;
this.setData({
'quantity.quantity': quantity
});
}
}));
~~~
this.setData({
'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
<!-- example/toast/index.html -->
~~~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
<!-- example/toast/index.js -->
~~~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, {
showToast() {
this.showZanToast('toast的内容');
}
}));
Page(Object.assign({}, Zan.Toast, {
showToast() {
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`目录中查看