小程序 实现fadeIn 渐变的效果

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

<!--test.wxml-->
<!--蒙版（渐出淡去效果）-->
<view class="aa" style='height: {{winH}}rpx;opacity: {{opacity}};'></view>

<!--正式内容（渐入加深效果）-->
 <view class="container log-list" style='opacity: {{1-opacity}};'>
   <block wx:for="{{logs}}" wx:for-item="log">
     <text class="log-item">{{index + 1}}. {{log}}</text>
   </block>
 </view>

/* test.wxss */

.log-list {
  display: flex;
  flex-direction: column;
  padding: 40rpx;
}
.log-item {
  margin: 10rpx;
}
.aa{
  background-color: darkcyan;
}

 

转载于:https://www.cnblogs.com/pansidong/p/11103362.html