2020年10月28日

微信小程序实现wow.js效果雏形 分享


微信小程序切图之实现wow.js效果雏形 分享,wow.js在web页面中很常用、很实用,也很简单,不过在微信小程序中似乎就没有那么容易了,因为微信中没有 dom的概念,所以每一步都很艰难,下面仅仅是雏形,不适合放到项目中,有时间着可以多磨磨,欢迎交流。
<div class=”container bc-gray” id=”app”>
  <div class=”m-class”>
    <div class=”m-class-banner”>
      <image class=“logo fadeInDown animated” src=”../../assets/images/classlogo.png”/>
      <image class=”img  ” src=”../../assets/images/class10.jpg”/>
    </div>
    <div class=”m-class-box”>
      <image class=”img img1 wow {{wowClass}}” bindscrolltoupper=”aa” src=”../../assets/images/class11.jpg”/>
      <image class=”img img2″ src=”../../assets/images/class12.jpg”/>
      <image class=”img img3″ src=”../../assets/images/class13.jpg”/>
    </div>
    <div class=”m-class-ft”>
      <div class=”price”>
        <div class=”price-l”>
          ¥<big class=”num”>9.9</big>元 <small>¥xxx元</small>
        </div>
        <div class=”price-r”>
          限时抢购<br />
          <!– 仅剩<font class=”num”>56</font>时<font class=”num”>34</font>分 <font class=”num”>45</font>秒<font class=”num”>7</font> –>
          <rich-text nodes=”{{timeLeft}}”></rich-text>
        </div>
      </div>
      <div class=”btns”>
        <a href=”#” class=”btn btn1″>了解家庭课堂正装</a>
        <a href=”#” class=”btn btn2″ bindtap=”openDialog”>立即购买</a>
      </div>
    </div>
  </div>
</div>
css
@import ‘../../assets/css/animate.min.wxss’;
.wow{ visibility: hidden;}
.animated{ visibility: visible;}
//index.js
//获取应用实例
const app = getApp()
const util = require(‘util.js’)
const winHeight = wx.getSystemInfoSync().windowHeight
Page({
  data: {
    showDialog:false,
    minusStatus: true,
    courseCount: 1,
    datetimeTo: “2021/01/01 10:30:00 GMT+0800”, // 秒杀开始时间
    timeLeft: “”,    // 剩下的时间(天时分秒)
    wowClass:”
  },
  onReady: function () {
    var that = this;
    var query = wx.createSelectorQuery()
    query.select(‘.wow’).boundingClientRect(function (res) {
      that.setData({
        tabScrollTop: res.top + 50   //根据实际需求加减值
      })
    }).exec()
  },
  onPageScroll: function (e) { // 页面滚动监听
    //console.log(e.scrollTop + ‘—-‘+ this.data.tabScrollTop);
    if (e.scrollTop > (this.data.tabScrollTop-winHeight)) {
      this.setData({
        wowClass: ‘fadeInUp animated’
      })
    } else {
      this.setData({
        wowClass: ” 
      })
    }
  },
  /*倒计时*/
  onShow: function () {
    this.data.timer = setInterval(() =>{ //注意箭头函数!!
      this.setData({
        timeLeft: util.getTimeLeft(this.data.datetimeTo)//使用了util.getTimeLeft
      });
      if (this.data.timeLeft == “0天0时0分0秒”) {
        clearInterval(this.data.timer);
      }
    }, 1000);
  },
  openDialog:function(){
    this.setData({
      showDialog:true
      })
  },
  closeDialog:function(){
    this.setData({
      showDialog:false
      })
  },
  //数字加1
addNum: function() {
  var courseCount = this.data.courseCount;
  courseCount++;
  this.setData({
    courseCount: courseCount,
    minusStatus: false
  })
},
//数字减1
minusNum: function() {
  var courseCount = this.data.courseCount;
  if (courseCount > 1) {
    courseCount–;
  }
  //数字<=1时,开启 – 按钮的disable状态
  var minusStatus = courseCount <= 1 ? true : false;
  this.setData({
    courseCount: courseCount,
    minusStatus: minusStatus
  });
},
  //事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: ‘../logs/logs’
    })
  },
  onLoad: function () {
    if (app.globalData.userInfo) {
      this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: true
      })
    } else if (this.data.canIUse){
      // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
      // 所以此处加入 callback 以防止这种情况
      app.userInfoReadyCallback = res => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    } else {
      // 在没有 open-type=getUserInfo 版本的兼容处理
      wx.getUserInfo({
        success: res => {
          app.globalData.userInfo = res.userInfo
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
        }
      })
    }
  },
  getUserInfo: function(e) {
    console.log(e)
    app.globalData.userInfo = e.detail.userInfo
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  }
})

本文由专业的WEB前端外包公司-切图网原创,转载请保留版权( WEB前端开发外包www.qietu.com切图网始于2007年,提供高品质的前端开发服务、前端外包、切图外包。欢迎来电咨询!热线:027-81777732、13343477732

标签: