比较简单 直接上码
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)
})
][2]
demo地点
https://github.com/tengwei30/xiaochengxu-modal.git