zoukankan      html  css  js  c++  java
  • 小程序 实现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;
    }
     

  • 相关阅读:
    Google Analytics:为链接点击设定事件追踪的方法
    HTTP状态码大全
    jquery插件的编写
    2016.2.27日(开学)学习总结
    关于单文件上传的封装
    单文件的文件上传详细解释
    php中对象的串行化
    PDO的事物处理机制
    MySQL操作类的封装(PHP)
    smarty的简单介绍
  • 原文地址:https://www.cnblogs.com/pansidong/p/11103362.html
Copyright © 2011-2022 走看看