×

了解微信小程序之wx.showToast

作者:abc1232018.01.23来源:Web前端之家浏览:40869评论:0

昨天才做了个微信小程序的页面,因为入门不久,很多东西还不熟悉,一些弹出层的交互还是比较陌生,还有很多要学习。今天在这里就分享昨天才学习到的微信小程序之wx.showToast。

wx.showToast(OBJECT)这个是微信提供的API,其作用是是显示消息提示框。下面是官方的文档说明:

参数类型必填说明最低版本
titleString提示的内容
iconString图标,有效值"success"、"loading"
imageString自定义图标的本地路径,image 的优先级高于 icon1.1.0
durationNumber提示的延迟时间,单位毫秒,默认:1500
maskBoolean是否显示透明蒙层,防止触摸穿透,默认:false
successFunction接口调用成功的回调函数
failFunction接口调用失败的回调函数
completeFunction接口调用结束的回调函数(调用成功、失败都会执行)

注意:其中的图标,只支持”success”、”loading”虽然只有两种图标,但是可以用到很多的场景,所有要说明成功失败或者其他文字说明的都可以用这个”success”图标,但是如果需要给用户有等待的心态,就要用到"loading"这个图标了。
下面是官方的示例代码:

wx.showToast({
  title: '成功',
  icon: 'success',
  duration: 2000})

大家可以把代码复制进去试试看下效果。

接下来我们一起来看下官方提供的一个DEMO,如下图:

toast

index页面的WXML代码所示:

<view class="body-view">
    <toast hidden="{{toast1Hidden}}" bindchange="toast1Change">
        默认    </toast>
    <button type="default" bindtap="toast1Tap">点击弹出默认toast</button></view><view class="body-view">
    <toast hidden="{{toast2Hidden}}" duration="3000" bindchange="toast2Change">
        设置duration    </toast>
    <button type="default" bindtap="toast2Tap">点击弹出设置duration的toast</button>
</view>

比如我们想实现弹出“登录成功”和“加载中”的提示,页面上JS交互这样来写:

toast1Change: function () {
    wx.showToast({    
    title: '登陆成功',    
    icon: 'success',    
    duration: 1200
  })
},
toast1Tap: function () {
  wx.showToast({
    title: '加载中',
    icon: 'loading',
    duration: 1200
  })
},

最终效果很简单,这只是提示最基本的功能,在很多情况下我们都需要自定义弹出框的,很少用系统自带的,这里提出来只是告诉大家交互的基本方法。

如果我们想自定义弹出层怎么弄呢,很简单的哟,继续往下看。

首先我们在WXML代码里新建一个按钮和弹出层的代码:

  <button type="primary" bindtap="searchBtn">点击弹出</button>

  <!-- layer   -->
    <toast hidden="{{status}}" duration="3000" bindchange="toastHide">
          <view>这里是弹出层的内容123123</view>
          <view>这里是弹出层的内容</view>
          <button bindtap="toastHide">关闭</button>
    </toast>

上面的WXML,按钮我们使用了bindtap和bindchange方法,分别传参数searchBtn和toastHide,接下来我们的JS代码可以这样来写:

var status = true;
Page({
    searchBtn: function (event) {
      console.log("触发了点击事件,弹出toast")
      status = false
      this.setData({ status: status })    //setData方法可以建立新的data属性,从而起到跟视图实时同步的效果
    },
    toastHide: function (event) {
      console.log("触发bindchange,隐藏toast")
      status = true
      this.setData({ status: status })
    },
    data: {
      status: status            //data里面的属性可以传递到视图
    },    
})

对于上面提到的参数分别执行了动,核心代码就这些,至于样式大家自己去搞定。

您的支持是我们创作的动力!
温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/wx123123WERWEFSDF.html

网友评论文明上网理性发言 已有0人参与

发表评论: