• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

小程序实现fadeIn渐变的效果

原作者: [db:作者] 来自: [db:来源] 收藏 邀请
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;
}
 

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序下拉按钮动画发布时间:2022-07-18
下一篇:
微信小程序保存图片的方法发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap