比较简单 直接上码
Toast框
-
<import src="../../components/toast.wxml"/>
-
<!-- is="toast" 匹配组件中的toast提示 如果用dialog的话这就是dialog -->
-
<template is="toast" data="{{ ...$wux.toast }}"/>
-
<view class="page">
-
<view class="page_title">
-
<view class="page_desc" style="text-align:center">提示框</view>
-
</view>
-
<view>
-
<view class="weui-btn-area">
-
<button class="weui-btn" type="primary" bindtap="showToast">成功提示</button>
-
<button class="weui-btn" type="primary" bindtap="showToastCancel">取消提示</button>
-
<button class="weui-btn" type="primary" bindtap="showToastErr">禁止提示</button>
-
<button class="weui-btn" type="primary" bindtap="showToastText">文本提示</button>
-
</view>
-
</view>
-
</view>
js
-
const App = getApp()
-
Page({
-
data: {},
-
onLoad() {
-
this.$wuxToast = App.wux(this).$wuxToast
-
},
-
showToast() {
-
const _this =this;
-
_this.$wuxToast.show({
-
type: 'success',
-
timer: 1500,
-
color: '#fff',
-
text: '已完成',
-
// 成功之后的返回,想当于下面的success
-
success: () => console.log('已完成')
-
// success: function(){
-
// console.log('已完成')
-
// }
-
})
-
},
-
showToastCancel() {
-
const _this =this;
-
_this.$wuxToast.show({
-
type: 'cancel',
-
timer: 1500,
-
color: '#fff',
-
text: '取消操作',
-
success: () => console.log('取消操作')
-
})
-
},
-
showToastErr() {
-
const _this =this;
-
_this.$wuxToast.show({
-
type: 'forbidden',
-
timer: 1500,
-
color: '#fff',
-
text: '禁止操作',
-
success: () => console.log('禁止操作')
-
})
-
},
-
showToastText() {
-
const _this =this;
-
_this.$wuxToast.show({
-
type: 'text',
-
timer: 1500,
-
color: '#fff',
-
text: '文本内容',
-
success: () => console.log('文本内容')
-
})
-
},
-
})
注意点
在app.js中要引入wxui
-
import wux from 'components/wux'
-
App({
-
onLaunch() {
-
console.log('onLaunch')
-
},
-
onShow() {
-
console.log('onShow')
-
},
-
onHide() {
-
console.log('onHide')
-
},
-
// 通过scope来引入wux函数
-
wux: (scope) => new wux(scope)
-
})
demo地址
https://github.com/tengwei30/xiaochengxu-modal
下载地址
 |
xiaochengxu-modal-master.zip |
|
