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>
- 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)
- })
https://github.com/tengwei30/xiaochengxu-modal
下载地址
xiaochengxu-modal-master.zip |