add dialog example

This commit is contained in:
Nino 2016-12-22 15:00:10 +08:00
parent 979ae94f36
commit 9b761bd032
4 changed files with 46 additions and 1 deletions

View File

@ -15,7 +15,8 @@
"example/steps/index",
"example/namecard/index",
"example/toast/index",
"example/icon/index"
"example/icon/index",
"example/dialog/index"
],
"window":{
"navigationBarBackgroundColor": "#FAFAFA",

View File

@ -49,6 +49,10 @@
<view class="zui-cell__bd">Quantity</view>
<view class="zui-cell__ft"></view>
</navigator>
<navigator class="zui-cell zui-cell--access" url="/example/dialog/index">
<view class="zui-cell__bd">Dialog</view>
<view class="zui-cell__ft"></view>
</navigator>
<navigator class="zui-cell zui-cell--access" url="/example/toptips/index">
<view class="zui-cell__bd">Toptips</view>
<view class="zui-cell__ft"></view>

20
example/dialog/index.js Normal file
View File

@ -0,0 +1,20 @@
var app = getApp()
Page({
data: {
showDialog: false
},
toggleDialog() {
this.setData({
showDialog: !this.data.showDialog
});
},
onLoad: function () {
},
onShow: function() {
},
})

20
example/dialog/index.wxml Normal file
View File

@ -0,0 +1,20 @@
<view class="container">
<view class="zui-btns">
<button
class="zui-btn zui-btn--primary zui-btn--big"
bindtap="toggleDialog"
style="margin-top: 40vh;"
>
显示弹层
</button>
</view>
<view class="zui-dialog {{ showDialog ? 'zui-dialog--show' : '' }}">
<view class="zui-dialog__mask" bindtap="toggleDialog" />
<view class="zui-dialog__container">
<view style="padding: 100px 0; text-align: center;">内容</view>
</view>
</view>
</view>