微信小程序切图之实现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
})
}
})
切图网微信公众号
武汉切图网络技术有限公司企业微信
