用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实用组件/插件 查看内容

微信小程序实用组件:自定义弹框toast

qdy_tcaqy 2017-2-6 14:30

自定义弹框。简单实用。

小程序提供的提示弹框没有错误,警告的样式只有success和loading的,但是在实际需求中需要很多的这样的提示框,简单的做了一个,供大家参考 
效果预览:

代码介绍: 
alert.js:

  1. function alertShow(that, iconType, alertlable) {
  2. that.setData({
  3. isAlert: true,
  4. iconType: iconType,
  5. alertLable: alertlable
  6. });
  7. setTimeout(function (e) {
  8. that.setData({
  9. isAlert: false
  10. })
  11. }, 1500)
  12. }
  13. module.exports = {
  14. alertShow: alertShow
  15. }

alert.wxml

  1. <view wx:if="{{isAlert}}" style="position:fixed;margin: auto;left: 0;right: 0;top: 0;bottom: 0;width: 70%;height: 22%;background-color: rgba(66, 66, 66, 0.9); text-align: center;border-radius: 10rpx;z-index:9999">
  2. <icon type="{{iconType}}" color="White" size="45" style="margin-top:5%;"></icon>
  3. <view style="color:white; width:80%;margin-left:10%;margin-top:5%">
  4. {{alertLable}}
  5. </view>
  6. </view>

使用界面:

  1. //index.js
  2. //获取应用实例
  3. var Show = require("../../utils/alert/alert.js");
  4. var app = getApp()
  5. Page({
  6. data: {
  7. motto: 'Hello World',
  8. userInfo: {}
  9. },
  10. //事件处理函数
  11. bindViewTap: function () {
  12. wx.navigateTo({
  13. url: '../logs/logs'
  14. })
  15. },
  16. warn: function (e) {
  17. Show.alertShow(this, "warn", "这是警告框");
  18. // 第一个参数是this,
  19. // 第二个参数是提示框种类具体可参照icon的type
  20. // 第三个参数是提示框的文字
  21. },
  22. info: function (e) {
  23. Show.alertShow(this, "info", "这提示框");
  24. },
  25. success: function (e) {
  26. Show.alertShow(this, "success", "这是成功框");
  27. },
  28. waiting: function (e) {
  29. Show.alertShow(this, "waiting", "这是等待框");
  30. },
  31. onLoad: function () {
  32. console.log('onLoad')
  33. var that = this
  34. //调用应用实例的方法获取全局数据
  35. app.getUserInfo(function (userInfo) {
  36. //更新数据
  37. that.setData({
  38. userInfo: userInfo
  39. })
  40. })
  41. }
  42. })
  1. <!--index.wxml-->
  2. <view class="container">
  3. <view bindtap="bindViewTap" class="userinfo">
  4. <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
  5. <text class="userinfo-nickname">{{userInfo.nickName}}</text>
  6. </view>
  7. <view class="usermotto">
  8. <view bindtap="warn" class="item">
  9. 警告框
  10. </view>
  11. <view bindtap="success" class="item">
  12. 提示框
  13. </view>
  14. <view bindtap="info" class="item">
  15. 成功框
  16. </view>
  17. <view bindtap="waiting" class="item">
  18. 等待框
  19. </view>
  20. </view>
  21. </view>
  22. <!--引入alert-->
  23. <include src="../../utils/alert/alert.wxml" />

文件下载:自定义弹框.zip

鲜花
鲜花 (1)
鸡蛋
鸡蛋

刚表态过的朋友 (1 人)

分享至 : QQ空间
收藏

相关阅读