小程式淡入淡出效果-初步想法，有好的想法在貼出來
阿新 • • 發佈：2018-12-27
//xx.js
const util = require('../../utils/util.js')
//把winHeight設為常量，不要放在data裡（一般來說不用於渲染的資料都不能放在data裡）
const winHeight = wx.getSystemInfoSync().windowHeight
Page({ data: { animationData: {}, hidden: false,//關注預設顯示 },
// 點選關注隱藏按鈕 bindfollow: function (e) { var animation = wx.createAnimation({ duration: 1000, timingFunction: 'linear', })
this.animation = animation
animation.opacity(0).step()
this.setData({ animationData: animation.export() })
setTimeout(function () { this.setData({ hidden: true }) }.bind(this), 1000)
},
onLoad: function () { this.setData({ winH: wx.getSystemInfoSync().windowHeight, winHeight: wx.getSystemInfoSync().windowHeight, opacity: 1, //這個是微信官方給的獲取logs的方法 看了收益匪淺 logs: (wx.getStorageSync('logs') || []).map(log => { return util.formatTime(new Date(log)) }) }) }, onShow: function () { this.hide() }, //核心方法，執行緒與setData hide: function () { var vm = this var interval = setInterval(function () { if (vm.data.winH > 0) { //清除interval 如果不清除interval會一直往上加 clearInterval(interval) vm.setData({ winH: vm.data.winH - 5, opacity: vm.data.winH / winHeight }) vm.hide() } }, 10); }, scrolltoupper(e){ console.log('出發了') this.bindfollow() }, })
Page({ data: { animationData: {}, hidden: false,//關注預設顯示 },
// 點選關注隱藏按鈕 bindfollow: function (e) { var animation = wx.createAnimation({ duration: 1000, timingFunction: 'linear', })
this.animation = animation
animation.opacity(0).step()
this.setData({ animationData: animation.export() })
setTimeout(function () { this.setData({ hidden: true }) }.bind(this), 1000)
},
onLoad: function () { this.setData({ winH: wx.getSystemInfoSync().windowHeight, winHeight: wx.getSystemInfoSync().windowHeight, opacity: 1, //這個是微信官方給的獲取logs的方法 看了收益匪淺 logs: (wx.getStorageSync('logs') || []).map(log => { return util.formatTime(new Date(log)) }) }) }, onShow: function () { this.hide() }, //核心方法，執行緒與setData hide: function () { var vm = this var interval = setInterval(function () { if (vm.data.winH > 0) { //清除interval 如果不清除interval會一直往上加 clearInterval(interval) vm.setData({ winH: vm.data.winH - 5, opacity: vm.data.winH / winHeight }) vm.hide() } }, 10); }, scrolltoupper(e){ console.log('出發了') this.bindfollow() }, })