频道栏目
首页 > 微信学院 > 微信小程序 > 正文
微信小程序实现淡入淡出效果(页面跳转)实现方法
2018-01-18 14:47:35      个评论      
收藏   我要投稿

//目前小程序没有fadeIn(),fadeOut()方法所以还是本方法手写

<!--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);
  }
})

以前这种就是渐变效果。

点击复制链接 与好友分享!回本站首页
上一篇:小程序上传图片到网站教程
下一篇:微信小程序SEO优化教程
相关文章
图文推荐

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站