如何使用微信小程序的提示框?

来源:天极下载 时间:2017-06-09 10:53:24 作者: anna

  这篇文章是教大家如何使用微信小程序的提示框?教程简单易学,有需要的小伙伴就赶紧和小编一起来学习一下吧。

  比较简单 直接上码

微信小程序的提示框的简单使用方法

  Toast框

  提示框

  成功提示

  取消提示

  禁止提示

  文本提示

  复制代码

  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)

  })

  复制代码

  以上就是如何使用微信小程序的提示框的全部内容了,大家都学会了吗?

相关推荐
AI桌面浏览器

热文推荐

  • 48小时热文
  • 每周热文

如何使用微信小程序的提示框?