微信小程序weui在线入门教程-WeUi操作反馈-toast弹出式提示

效果图

微信小程序weui在线入门教程-WeUi操作反馈-toast弹出式提示

成功提示
微信小程序weui在线入门教程-WeUi操作反馈-toast弹出式提示

加载提示
微信小程序weui在线入门教程-WeUi操作反馈-toast弹出式提示

JS代码

openToast: function () {
    wx.showToast({
      title: '已完成',
      icon: 'success',
      duration: 3000
    });
  },
  openLoading: function () {
    wx.showToast({
      title: '数据加载中',
      icon: 'loading',
      duration: 3000
    });
  },

wxml代码

<view class="page">
  <view class="page__hd">
    <view class="page__title">Toast</view>
    <view class="page__desc">弹出式提示,采用小程序原生的toast</view>
  </view>
  <view class="page__bd">
    <view class="weui-btn-area">
      <button class="weui-btn" type="default" bindtap="openToast">成功提示</button>
      <button class="weui-btn" type="default" bindtap="openLoading">加载中提示</button>
    </view>
  </view>
</view>

欢迎大家学习我的视频课程:微信小程序-WeUI界面布局设计入门到精通
微信小程序weui在线入门教程-WeUi操作反馈-toast弹出式提示