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

docs(Tabbar): add some missing demos (#2218)

Browse Source
This commit is contained in:
neverland 2019-10-29 20:18:31 +08:00 committed by GitHub
parent 1a7482d865
commit 05c0b4592b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 61 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
example/pages/tabbar/index.js
View File

@ -4,7 +4,13 @@ Page({
data: {
active: 0,
active2: 'home',
active3: 0
active3: 0,
active4: 0,
active5: 0,
icon: {
normal: 'https://img.yzcdn.cn/vant/user-inactive.png',
active: 'https://img.yzcdn.cn/vant/user-active.png'
}
},
onChange(event) {

45
example/pages/tabbar/index.wxml
View File

@ -42,3 +42,48 @@
<van-tabbar-item icon="setting-o" info="20">标签</van-tabbar-item>
</van-tabbar>
</demo-block>
<demo-block title="自定义图标">
<van-tabbar
active="{{ active4 }}"
data-key="active4"
custom-class="tabbar"
safe-area-inset-bottom="{{ false }}"
bind:change="onChange"
>
<van-tabbar-item info="3">
<image
slot="icon"
src="{{ icon.normal }}"
mode="aspectFit"
style="width: 30px; height: 18px;"
/>
<image
slot="icon-active"
src="{{ icon.active }}"
mode="aspectFit"
style="width: 30px; height: 18px;"
/>
自定义
</van-tabbar-item>
<van-tabbar-item icon="search">标签</van-tabbar-item>
<van-tabbar-item icon="setting-o">标签</van-tabbar-item>
</van-tabbar>
</demo-block>
<demo-block title="自定义颜色">
<van-tabbar
active="{{ active5 }}"
data-key="active5"
custom-class="tabbar"
active-color="#07c160"
inactive-color="#000"
safe-area-inset-bottom="{{ false }}"
bind:change="onChange"
>
<van-tabbar-item icon="home-o">标签</van-tabbar-item>
<van-tabbar-item icon="search">标签</van-tabbar-item>
<van-tabbar-item icon="friends-o">标签</van-tabbar-item>
<van-tabbar-item icon="setting-o">标签</van-tabbar-item>
</van-tabbar>
</demo-block>

18
packages/tabbar/README.md
View File

@ -29,9 +29,9 @@ Page({
data: {
active: 0
},
// event.detail 的值为当前选中项的索引
onChange(event) {
console.log(event.detail);
// event.detail 的值为当前选中项的索引
this.setData({ active: event.detail });
}
});
```
@ -55,7 +55,7 @@ Page({
active: 'home'
},
onChange(event) {
console.log(event.detail);
this.setData({ active: event.detail });
}
});
```
@ -82,11 +82,13 @@ Page({
slot="icon"
src="{{ icon.normal }}"
mode="aspectFit"
style="width: 30px; height: 18px;"
/>
<image
slot="icon-active"
src="{{ icon.active }}"
mode="aspectFit"
style="width: 30px; height: 18px;"
/>
自定义
</van-tabbar-item>
@ -100,13 +102,12 @@ Page({
data: {
active: 0,
icon: {
normal: '//img.yzcdn.cn/icon-normal.png',
active: '//img.yzcdn.cn/icon-active.png'
normal: 'https://img.yzcdn.cn/vant/user-inactive.png',
active: 'https://img.yzcdn.cn/vant/user-active.png'
}
},
onChange(event) {
console.log(event.detail);
this.setData({ active: event.detail });
}
});
```
@ -132,9 +133,8 @@ Page({
data: {
active: 0
},
// event.detail 的值为当前选中项的索引
onChange(event) {
console.log(event.detail);
this.setData({ active: event.detail });
}
});
```