微信小程序提示框toast组件—wxui的使用

[复制链接]
hyt_xcx手机认证 实名认证 视频认证 发表于 2017-1-23 22:48:43 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
作者:滕伟 ,来自原文地址
比较简单 直接上码
1.gif

Toast框
  1. <import src="../../components/toast.wxml"/>
  2. <!-- is="toast" 匹配组件中的toast提示  如果用dialog的话这就是dialog -->
  3. <template is="toast" data="{{ ...$wux.toast }}"/>
  4. <view class="page">
  5. <view class="page_title">
  6.     <view class="page_desc" style="text-align:center">提示框</view>
  7. </view>
  8. <view>
  9.     <view class="weui-btn-area">
  10.         <button class="weui-btn" type="primary" bindtap="showToast">成功提示</button>
  11.             <button class="weui-btn" type="primary" bindtap="showToastCancel">取消提示</button>
  12.             <button class="weui-btn" type="primary" bindtap="showToastErr">禁止提示</button>
  13.             <button class="weui-btn" type="primary" bindtap="showToastText">文本提示</button>
  14.     </view>
  15. </view>
  16. </view>
复制代码
js
  1. const App = getApp()
  2. Page({
  3.     data: {},
  4.     onLoad() {
  5.         this.$wuxToast = App.wux(this).$wuxToast
  6.     },
  7.     showToast() {
  8.         const _this =this;
  9.         _this.$wuxToast.show({
  10.             type: 'success',
  11.             timer: 1500,
  12.             color: '#fff',
  13.             text: '已完成',
  14.             // 成功之后的返回,想当于下面的success
  15.             success: () => console.log('已完成')
  16.             // success: function(){
  17.             //     console.log('已完成')
  18.             // }
  19.         })
  20.     },
  21.     showToastCancel() {
  22.         const _this =this;
  23.         _this.$wuxToast.show({
  24.             type: 'cancel',
  25.             timer: 1500,
  26.             color: '#fff',
  27.             text: '取消操作',
  28.             success: () => console.log('取消操作')
  29.         })
  30.     },
  31.     showToastErr() {
  32.         const _this =this;
  33.         _this.$wuxToast.show({
  34.             type: 'forbidden',
  35.             timer: 1500,
  36.             color: '#fff',
  37.             text: '禁止操作',
  38.             success: () => console.log('禁止操作')
  39.         })
  40.     },
  41.     showToastText() {
  42.         const _this =this;
  43.         _this.$wuxToast.show({
  44.             type: 'text',
  45.             timer: 1500,
  46.             color: '#fff',
  47.             text: '文本内容',
  48.             success: () => console.log('文本内容')
  49.         })
  50.     },
  51. })
复制代码
注意点
在app.js中要引入wxui
  1. import wux from 'components/wux'
  2. App({
  3.     onLaunch() {
  4.         console.log('onLaunch')
  5.     },
  6.     onShow() {
  7.         console.log('onShow')
  8.     },
  9.     onHide() {
  10.         console.log('onHide')
  11.     },
  12.     // 通过scope来引入wux函数
  13.     wux: (scope) => new wux(scope)
  14. })      
复制代码
项目地址:
游客,如果您要查看本帖隐藏内容请回复

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

专注源码分享,教程分享
全国服务电话

187-8198-7163

周一至周8:00-22:00

反馈建议

cdhaoyt@163.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.2© 2001-2013 Comsenz Inc.( 蜀ICP备16032957号-1