wxml
<view class='bg' style='background-size: 100% {{winHeight}}px;'>
<!-- 背景 -->
<scroll-view class='scroll' style='height:{{winHeight}}px' scroll-y upper-threshold bindscrolltoupper='scrolltoupper' animation="{{animationData}}" hidden='{{!hidden}}'>
</scroll-view>
<scroll-view class='scroll' style='height:{{winHeight}}px' scroll-y upper-threshold bindscrolltoupper='scrolltoupper' animation="{{animationData}}" hidden='{{hidden}}'>
<view class='top'>上邊模塊</view>
<view class='kong'></view>
<view class='top'>{{winHeight}}</view>
<view class='top'>上邊模塊</view>
<view class='top'>上邊模塊</view>
</scroll-view>
</view>
js
//xx.js
const util = require('../../utils/util.js')
//把winHeight設為常量，不要放在data里（一般來說不用於渲染的數據都不能放在data里）
const winHeight = wx.getSystemInfoSync().windowHeight
Page({
data: {
animationData: {},
hidden: false,//關注默認顯示
},
// 點擊關注隱藏按鈕
bindfollow: function (e) {
var animation = wx.createAnimation({
duration: 1000,
timingFunction: 'linear',
})
this.animation = animation
animation.opacity(0).step()
this.setData({
animationData: animation.export()
})
setTimeout(function () {
this.setData({
hidden: true
})
}.bind(this), 1000)
},
onLoad: function () {
this.setData({
winH: wx.getSystemInfoSync().windowHeight,
winHeight: 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);
},
scrolltoupper(e){
console.log('出發了')
this.bindfollow()
},
})
wxss
page{
overflow: hidden;
}
.bg{
width: 100%;
height: 100%;
background: url('http://bmob-cdn-13048.b0.upaiyun.com/2018/09/03/6ca3930a40a4e87e806efca94d8b7808.jpg') no-repeat;
}
.bg view{
width: 100%;
height: 400rpx;
line-height: 400rpx;
text-align: center;
}
.top,.btm1 {
background: #fff;
}
.scroll{
width: 100%;
height: 1000rpx;
}
.log-list {
display: flex;
flex-direction: column;
padding: 40rpx;
}
.log-item {
margin: 10rpx;
}
.aa{
">darkcyan;
}