小程序淡入淡出效果-初步想法，有好的想法在贴出来

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了小程序淡入淡出效果-初步想法，有好的想法在贴出来，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2296字，纯文字阅读大概需要4分钟。

内容图文

wxml

 

<view class='bg' style='background-size: 100% {{winHeight}}px;'> <!-- 背景 --> <scroll-view class='scroll' style='height:{{winHeight}}px' scroll-y upper-threshold bindscrolltoupper='scrolltoupper' animation="{{animationData}}" hidden='{{!hidden}}'> </scroll-view> <scroll-view class='scroll' style='height:{{winHeight}}px' scroll-y upper-threshold bindscrolltoupper='scrolltoupper' animation="{{animationData}}" hidden='{{hidden}}'> <view class='top'>上边模块</view> <view class='kong'></view> <view class='top'>{{winHeight}}</view> <view class='top'>上边模块</view> <view class='top'>上边模块</view> </scroll-view> </view> ? ? js ? //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)
},
onl oad: 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() }, }) ? ? wxss ? ? page{ overflow: hidden; } .bg{ width: 100%; height: 100%; background: url('http://bmob-cdn-13048.b0.upaiyun.com/2018/09/03/6ca3930a40a4e87e806efca94d8b7808.jpg') no-repeat; } .bg view{ width: 100%; height: 400rpx; line-height: 400rpx; text-align: center; } .top,.btm1 { background: #fff; } .scroll{ width: 100%; height: 1000rpx; }
.log-list { display: flex; flex-direction: column; padding: 40rpx; } .log-item { margin: 10rpx; } .aa{ ">darkcyan; }

内容总结

以上是互联网集市为您收集整理的小程序淡入淡出效果-初步想法，有好的想法在贴出来全部内容，希望文章能够帮你解决小程序淡入淡出效果-初步想法，有好的想法在贴出来所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---