效果图
.wxml
<view class="index">
<view wx:for="{{detail}}" wx:key="index" class="center {{item.hide?'animation':''}}" id="curr{{index}}">
<view wx:if="{{item.hide}}">
{{item.name}}{{index}}
</view>
</view>
</view>
.wxss
.index{
width: 100%;
float: left;
min-height: 100vh;
background-color: #ffcccc;
padding-bottom: 30rpx;
}
.center{
width: 80%;
margin: 30rpx 10% 0;
float: left;
font-size: 26rpx;
height: 200rpx;
background-color: #fff;
}
.animation{
animation:center 1s;
}
@keyframes center{
from {
transform:scale(0.3);
}
to {
transform:scale(1);
}
}
.js
Page({
data: {
detail: [{ name: '测试' }, { name: '测试' }, { name: '测试' }, { name: '测试' }, { name: '测试' }, { name: '测试' }, { name: '测试' }, { name: '测试' }, { name: '测试' }, { name: '测试' }, { name: '测试' }, { name: '测试' }, { name: '测试' }, { name: '测试' }, { name: '测试' }, { name: '测试' }, { name: '测试' }, { name: '测试' }, { name: '测试' }, { name: '测试' }, { name: '测试' }, { name: '测试' }, { name: '测试' }, { name: '测试' }, { name: '测试' }, { name: '测试' }, { name: '测试' }, { name: '测试' }, { name: '测试' }, { name: '测试' }, { name: '测试' }, { name: '测试' }, { name: '测试' }, { name: '测试' }, { name: '测试' }, { name: '测试' }, { name: '测试' }],
windowHeight: '',
},
onLoad: function (opstion) {
let that = this
wx.getSystemInfo({
success: function (res) {
that.setData({
windowHeight: res.windowHeight
})
},
})
for (let i = 0; i < that.data.detail.length; i++) {
wx.createSelectorQuery().select('#curr' + i).boundingClientRect(function (rect) {
that.data.detail[i].height = rect.top
if (that.data.detail[i].height <= that.data.windowHeight) {
that.data.detail[i].hide = true
} else {
that.data.detail[i].hide = false
}
if (i == (that.data.detail.length - 1)) {
that.setData({
detail: that.data.detail
})
}
}).exec()
}
},
onPageScroll: function (e) {
let that = this
if (that.data.detail[that.data.detail.length - 1].hide) {
return false
}
wx.getSystemInfo({
success: function (res) {
that.setData({
windowHeight: res.windowHeight + e.scrollTop
})
},
})
for (let i = 0; i < that.data.detail.length; i++) {
if (that.data.detail[i].height <= that.data.windowHeight) {
that.data.detail[i].hide = true
} else {
that.data.detail[i].hide = that.data.detail[i].hide ? true : false
}
}
that.setData({
detail: that.data.detail
})
},
})
遇到问题可以看我主页加我Q,很少看博客,对你有帮助别忘记点赞收藏