WeUI for 小程序Toast弹窗提示

2018年11月07日 09:26 | 40次浏览 作者原创 版权保护

微信小程序的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   转载请注明出处!谢谢!

感觉本站内容不错,读后有收获?小额赞助,鼓励网站分享出更好的教程