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

来源:下载之家 作者:zhangqian

WPS Office

WPS Office

版本:免费完整版 v10.1.0.7566
大小:70.66MB
分类: 办公软件
查看详情

导读: 微信小程序的组件有不少,提示框组件就是其中之一。下面就是小编给大家带来的微信小程序的提示框的简单使用方法,感兴趣的小伙伴就一起来看看吧。

  微信小程序的组件有不少,提示框组件就是其中之一。下面就是小编给大家带来的微信小程序的提示框的简单使用方法,感兴趣的小伙伴就一起来看看吧。

  比较简单 直接上码

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

  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)

  })

  复制代码

  微信小程序的提示框的简单使用方法就是这些,大家学会了吗?