欧美三级国产三级日韩三级_亚洲熟妇丰满大屁股熟妇_欧美亚洲成人一区二区三区_国产精品久久久久久模特

微信小程序?qū)崿F(xiàn)淡入淡出效果（頁面跳轉(zhuǎn)） - 新聞資訊 - 云南小程序開發(fā)|云南軟件開發(fā)|云南網(wǎng)站建設(shè)-昆明葵宇信息科技有限公司

159-8711-8523

云南網(wǎng)建設(shè)/小程序開發(fā)/軟件開發(fā)

微信小程序?qū)崿F(xiàn)淡入淡出效果（頁面跳轉(zhuǎn)）

發(fā)表時(shí)間：2021-3-31

發(fā)布人：葵宇科技

瀏覽次數(shù)：153

//目前小程序沒有fadeIn()，fadeOut()方法所以還是本方法手寫

<!--wxml-->
<!--蒙版（漸出淡去效果）-->
<view class="aa" style='height: {{winH}}rpx;opacity: {{opacity}};'></view>
<!--正式內(nèi)容（漸入加深效果）-->
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設(shè)為常量，不要放在data里（一般來說不用于渲染的數(shù)據(jù)都不能放在data里）
const winHeight = wx.getSystemInfoSync().windowHeight
Page({
  data: {
    logs: []
  },
  onLoad: function () {
    this.setData({
      winH: wx.getSystemInfoSync().windowHeight,
      opacity: 1,
      //這個(gè)是微信官方給的獲取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會(huì)一直往上加
        clearInterval(interval)
        vm.setData({ winH: vm.data.winH - 5, opacity: vm.data.winH / winHeight })
        vm.hide()
      }
    }, 10);
  }
})