微信小程序开发常用技巧(7)——实现一个类似于Android toast效果动画

很多时候,我们在小程序中使用wx.showToast(),发现样式不是很好看,那么我们能不能做一个跟原生APP类似的toast呢?答案是肯定的。今天就利用微信小程序的动画wx.createAnimation()实现一个简单的类似原生APP的toast提示。
先来看看运行效果:
这里写图片描述
这个图片丢人了,不好意思,将就看吧。哈哈。大致上还是能看清楚的。
接下来直接上代码:

<!--index.wxml-->
<button bindtap="clickButton">点击弹出toast</button>
<view animation="{{animation}}" class="toast">
  {{inputName}}
</view>
/**index.wxss**/
button{
  margin-top: 600rpx;
}

.toast {
  position: fixed;
  top: -50px;
  z-index: 9999;
  background-color: rgba(33, 33, 33, 0.6);
  color: #fff;
  padding: 6px 0;
  font-size: 13px;
  width: 40%;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 30%;
}
//index.js
Page({
  data:{
    inputName:'',
    animation: ''
  },
  onLoad: function () {
    var that = this
  },
  clickButton: function(){
    var that = this;
    that.doAnimation("提示信息");
  },
  onReady: function () {
    //实例化一个动画
    this.animation = wx.createAnimation({
      // 动画持续时间,单位ms,默认值 400
      duration: 300,
      /**
       *  linear  动画一直较为均匀
       */
      timingFunction: 'linear',
      // 延迟多长时间开始
      delay: 0,
      transformOrigin: 'left top 0',
      success: function (res) {
        console.log(res)
      }
    })
  },
  doAnimation: function (inputName) {
    var that = this
    that.animation.translateY(80).step()
    that.setData({
      inputName: inputName,
      //输出动画
      animation: that.animation.export()
    })
    setTimeout(function () {
      that.animation.translateY(-80).step()
      that.setData({
        //输出动画
        animation: that.animation.export()
      })
    }, 1000)
  }
})

看懂了吗?快去试试吧。

阅读更多
文章标签: 微信小程序开发
想对作者说点什么? 我来说一句

微信小程序类似AndroidToast

2017年02月07日 4KB 下载

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭