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

toast example

Browse Source
This commit is contained in:
pangxie1991 2016-12-19 18:01:59 +08:00
parent 57b7e3333a
commit 70fd414cf6
10 changed files with 129 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app.json
View File

@ -10,7 +10,8 @@
"pages/tab/index",
"pages/quantity/index",
"pages/toptips/index",
"pages/steps/index"
"pages/steps/index",
"pages/toast/index"
],
"window":{
"navigationBarBackgroundColor": "#FAFAFA",

10
pages/dashboard/index.wxml
View File

@ -33,10 +33,18 @@
<view class="zui-cell__bd">Quantity</view>
<view class="zui-cell__ft"></view>
</navigator>
<navigator class="zui-cell zui-cell--access zui-cell--last-child" url="/pages/toptips/index">
<navigator class="zui-cell zui-cell--access" url="/pages/toptips/index">
<view class="zui-cell__bd">Toptips</view>
<view class="zui-cell__ft"></view>
</navigator>
<navigator class="zui-cell zui-cell--access" url="/pages/steps/index">
<view class="zui-cell__bd">Steps</view>
<view class="zui-cell__ft"></view>
</navigator>
<navigator class="zui-cell zui-cell--access zui-cell--last-child" url="/pages/toast/index">
<view class="zui-cell__bd">Toast</view>
<view class="zui-cell__ft"></view>
</navigator>
</view>
</view>

82
pages/steps/index.wxml
View File

@ -1,24 +1,68 @@
<view class="top-info__steps zui-steps zui-steps-3">
<view
class="zui-steps__step zui-steps__step--first-child zui-steps__step--done">
<text class="zui-steps__title">步骤一</text>
<view class="zui-steps__icon">
<view class="zui-steps__circle"></view>
<view class="container">
<view class="zui-cell">
<view class="zui-cell__bd">
<view class="top-info__steps zui-steps zui-steps-3">
<view
class="zui-steps__step zui-steps__step--first-child zui-steps__step--done">
<text class="zui-steps__title">步骤一</text>
<view class="zui-steps__icon">
<view class="zui-steps__circle"></view>
</view>
<view class="zui-steps__line"></view>
</view>
<view class="zui-steps__step zui-steps__step--done zui-steps__step--cur">
<text class="zui-steps__title">步骤二</text>
<view class="zui-steps__icon">
<view class="zui-steps__circle"></view>
</view>
<view class="zui-steps__line"></view>
</view>
<view class="zui-steps__step zui-steps__step--last-child">
<text class="zui-steps__title">步骤三</text>
<view class="zui-steps__icon">
<view class="zui-steps__circle"></view>
</view>
<view class="zui-steps__line"></view>
</view>
</view>
</view>
<view class="zui-steps__line"></view>
</view>
<view class="zui-steps__step zui-steps__step--done zui-steps__step--cur">
<text class="zui-steps__title">步骤二</text>
<view class="zui-steps__icon">
<view class="zui-steps__circle"></view>
<view class="zui-cell zui-cell--last-child">
<view class="zui-cell__bd">
<view class="top-info__steps zui-steps zui-steps-4">
<view
class="zui-steps__step zui-steps__step--first-child zui-steps__step--done">
<text class="zui-steps__title">步骤一</text>
<view class="zui-steps__icon">
<view class="zui-steps__circle"></view>
</view>
<view class="zui-steps__line"></view>
</view>
<view class="zui-steps__step zui-steps__step--done">
<text class="zui-steps__title">步骤二</text>
<view class="zui-steps__icon">
<view class="zui-steps__circle"></view>
</view>
<view class="zui-steps__line"></view>
</view>
<view class="zui-steps__step zui-steps__step--done zui-steps__step--cur">
<text class="zui-steps__title">步骤三</text>
<view class="zui-steps__icon">
<view class="zui-steps__circle"></view>
</view>
<view class="zui-steps__line"></view>
</view>
<view class="zui-steps__step zui-steps__step--last-child">
<text class="zui-steps__title">步骤四</text>
<view class="zui-steps__icon">
<view class="zui-steps__circle"></view>
</view>
<view class="zui-steps__line"></view>
</view>
</view>
</view>
<view class="zui-steps__line"></view>
</view>
<view class="zui-steps__step zui-steps__step--last-child">
<text class="zui-steps__title">步骤三</text>
<view class="zui-steps__icon">
<view class="zui-steps__circle"></view>
</view>
<view class="zui-steps__line"></view>
</view>
</view>

9
pages/toast/index.js Normal file
View File

@ -0,0 +1,9 @@
var ZUI = require('../../zui/index');
Page(Object.assign({}, ZUI.Toast, {
data: {},
showToast() {
this.showZuiToast('哎呀，出了点小问题');
}
}));

7
pages/toast/index.wxml Normal file
View File

@ -0,0 +1,7 @@
<import src="/zui/toast/index.wxml" />
<view class="container">
<button class="zui-btn zui-btn--primary zui-btn--big" catchtap="showToast">弹个窗~</button>
</view>
<template is="zui-toast" data="{{ componentToast }}"></template>

4
pages/toptips/index.js
View File

@ -1,6 +1,6 @@
var topTips = require('../../zui/toptips/index');
var ZUI = require('../../zui/index');
Page(Object.assign({}, topTips, {
Page(Object.assign({}, ZUI.TopTips, {
data: {},
showTopTips() {

2
zui/index.js
View File

@ -1,2 +1,4 @@
exports.Tab = require('./tab/index');
exports.Quantity = require('./quantity/index');
exports.TopTips = require('./toptips/index');
exports.Toast = require('./toast/index');

4
zui/steps/index.wxss
View File

@ -2,6 +2,10 @@
position: relative;
}
.zui-steps-5 .zui-steps__step {
width: 25%;
}
.zui-steps-4 .zui-steps__step {
width: 33%;
}

28
zui/toast/index.js Normal file
View File

@ -0,0 +1,28 @@
module.exports = {
showZuiToast(title, timeout) {
var componentToast = this.data.componentToast || {};
clearTimeout(componentToast.timer);
// 弹层设置~
componentToast = {
show: true,
title
};
this.setData({
componentToast
});
componentToast.timer = setTimeout(() => {
this.clearZuiToast();
}, timeout || 3000);
},
clearZuiToast() {
var componentToast = this.data.componentToast || {};
clearTimeout(componentToast.timer);
this.setData({
'componentToast.show': false
});
}
};

3
zui/toast/index.wxml Normal file
View File

@ -0,0 +1,3 @@
<template name="zui-toast">
<view class="zui-toast" wx:if="{{ componentToast.show }}" bindtap="clearToast">{{ componentToast.title }}</view>
</template>