欢迎光临,了解微信小程序开发,就上易用通!

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

发布:2018-01-25 10:01浏览: 来源:网络 作者:tianshu

比较简单 直接上码 
微信小程序提示框toast组件—wxui的使用(图1) 

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. })     
demo地址 
https://github.com/tengwei30/xiaochengxu-modal
下载地址
微信小程序提示框toast组件—wxui的使用(图2) xiaochengxu-modal-master.zip





免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。