Demo for learning WeChat mini program: simple picture animation red envelope code-Mini Program Development-php.cn

Demo for learning WeChat mini program: simple picture animation red envelope code

高洛峰

Release： 2017-03-26 15:46:40

Original

5013 people have browsed it

Demo for learning WeChat mini program: simple picture animation red envelope code

var app = getApp();
Page({
  data: {
    userInfo: {},
    src: &#39;&#39;,
    coverImg:{
      hidden: false,
      top: 0, //上面图片的top值
      bottom: 0, //下面图片的bottom值
      locked: false //首页展开触摸锁定
    },
    openPage: app.globalData.openPage==1?true:false
  },
  resetCoverImg: function() {
    this.setData({
      coverImg:{
        hidden: false,
        top: &#39;0&#39;,
        bottom: &#39;0&#39;
      }
    })
  },
  bindOpenTap: function () {
    var that = this;
    if(!that.data.coverImg.locked){
      that.setData({coverImg:{locked: true}});
      var dis = 0;
      var timer = setInterval(function(){
          dis -= 1;
          that.setData({
            coverImg:{
              top: dis+&#39;%&#39;,
              bottom: dis+&#39;%&#39;
            }
          })
        },10);
        setTimeout(function(){
          clearInterval(timer);
          //展开首页图
          that.setData({
            coverImg:{
              hidden: true,
              locked: false
            }
          })
          //未展示开屏页直接跳转
          if(that.data.openPage){
            that.goToOpenPage();
          }else{
            that.goToListPage();
          }
        },500);
    }
  },
  goToListPage: function() {
    wx.navigateTo({
      url: &#39;../list/list&#39;
    })
  },
  goToOpenPage: function() {
    wx.navigateTo({
      url: &#39;../open/open&#39;
    })
  },
  //分享
  onShareAppMessage: function() {
      app.updateUserInfo({&#39;type&#39;:0});
      return {
          title: &#39;优惠猎手PRO&#39;,
          desc: &#39;优惠猎手PRO&#39;,
          path: &#39;pages/index/index&#39;
      }
  },
  onShow: function() {
      this.resetCoverImg();
  }
})

Copy after login

The above is the detailed content of Demo for learning WeChat mini program: simple picture animation red envelope code. For more information, please follow other related articles on the PHP Chinese website!