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

  • 相关阅读:
    基于.net mvc 的供应链管理系统(YB-SCM)开发随笔1-开篇
    基于.net mvc 的供应链管理系统(YB-SCM)开发随笔
    asp.net http to https
    html嵌入音频
    语义化练习分区域
    html文档引用css使用外部样式表
    字体样式 圆角边框
    HTML-标签
    前端基础—客户端
    html初识form表单
  • 原文地址:https://www.cnblogs.com/pansidong/p/11103362.html
Copyright © 2011-2022 走看看