微信小程序的toast弹窗提示在实际项目中用的频率很高，例如本案例demo中成功提示，数据加载中提示。
一、引入小程序weui css样式库，请参考第一章
二、在pages目录中新建目录toast以及文件toast.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>
页面代码很简单，只有两个按钮，分别绑定了openToast和openLoding两个js函数。
三、在根目录app.json配置文件中配置toast文件路径，保存后会自动生成对应的js、css等文件
"pages/toast/toast",
四、toast.js代码实现
Page({
openToast: function () {
wx.showToast({
title: '已完成',
icon: 'success',
duration: 3000
});
},
openLoading: function () {
wx.showToast({
title: '数据加载中',
icon: 'loading',
duration: 3000
});
}
});上述代码两个js函数实现非常简单，从中可以看出采用的是小程序源生js库
五、效果
此文章本站原创，地址 https://www.vxzsk.com/1920.html
转载请注明出处！谢谢！
感觉本站内容不错，读后有收获？小额赞助,鼓励网站分享出更好的教程
上一篇：小程序蓝牙发送分包数据方法
下一篇：java 16进制求和示例
^