首页 > 微信 > 详细

微信小程序实现淡入淡出效果(页面跳转)

时间:2018-01-20 14:24:30      阅读:391      评论:0      收藏:0      [点我收藏+]

标签:color   rect   蒙版   storage   ||   info   splay   gpo   获取   

//目前小程序没有fadeIn(),fadeOut()方法所以还是本方法手写 
1 
<!--wxml-->
<!--蒙版(渐出淡去效果)-->
<view class="aa" style=‘height: {{winH}}rpx;opacity: {{opacity}};‘></view>

<!--正式内容(渐入加深效果)--> 2 <view class="container log-list" style=‘opacity: {{1-opacity}};‘> 3 <block wx:for="{{logs}}" wx:for-item="log"> 4 <text class="log-item">{{index + 1}}. {{log}}</text> 5 </block> 6 </view>

<!--wxss-->
技术分享图片
.log-list {
  display: flex;
  flex-direction: column;
  padding: 40rpx;
}
.log-item {
  margin: 10rpx;
}
.aa{
  background-color: darkcyan;
}
技术分享图片

技术分享图片
//xx.js
const util = require(‘../../utils/util.js‘)
//把winHeight设为常量,不要放在data里(一般来说不用于渲染的数据都不能放在data里) const winHeight = wx.getSystemInfoSync().windowHeight Page({ data: { logs: [] }, onLoad: function () { this.setData({ winH: 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); } })

技术分享图片
以前这种就是渐变效果

微信小程序实现淡入淡出效果(页面跳转)

标签:color   rect   蒙版   storage   ||   info   splay   gpo   获取   

原文:https://www.cnblogs.com/ybaby/p/8320498.html

(0)
(0)
   
举报
评论 一句话评论(0
0条  
登录后才能评论!
© 2014 bubuko.com 版权所有 鲁ICP备09046678号-4
打开技术之扣,分享程序人生!
             

鲁公网安备 37021202000002号