zoukankan      html  css  js  c++  java
  • 微信小程序实现淡入淡出效果(页面跳转)

    //目前小程序没有fadeIn(),fadeOut()方法所以还是本方法手写 
    1 
    <!--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); } })


    以前这种就是渐变效果
     
  • 相关阅读:
    C语言I博客作业07
    C语言I博客作业06
    C语言I博客作业05
    C语言I博客作业04
    C语言II博客作业04
    C语言II博客作业03
    C语言II博客作业01
    学期总结
    C语言I博客作业08
    C语言I博客作业07
  • 原文地址:https://www.cnblogs.com/Oopa/p/8134566.html
Copyright © 2011-2022 走看看