微信小程序 ，列表头滚动的过程中 ，view 悬浮在顶部 ，如何实现这样的一个效果呢？？
//index.js
//获取应用实例
const app = getApp()
Page({
data: {
testData: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
testData2: [1, 2, 3, 4, 5, 10],
//是否显示 悬停布局
isshow:false,
//悬浮布局的数据
toptexxt:""
},
onLoad: function () {
},
/**
* 页面加载完成
*/
onReady: function () {
},
/**
* 页面滚动监听
*/
onPageScroll: function (e) {
//console.log(e)
let that = this
let query = wx.createSelectorQuery()
query.selectAll(".section-cell").boundingClientRect(function (res) {
console.log(res)
let size =res.length;
let position = -1;
let topshow = -1000;//根据需求设置大小
let i=0;
//根据 top 的 大小 获取 当前距离顶部最近的view 的下标， 负数最大值 或者是0，
for(i=0;i<size;i++){0
let top = res[i].top;
if(top<=0 && top>topshow ){
topshow = top;
position=i;
}
}
console.log("当前坐标是 position = "+position)
let isshow =false;
if (res[0].top<0){
if(position==-1) position=0;
isshow = true;
}
that.setData({
isshow: isshow,
toptexxt: isshow?that.data.testData[position]:""
})
}).exec()
},
})
<!--index.wxml-->
<view>
<view class='header'>这里是header</view>
<view hidden='{{!isshow}}'>
<view class= "section-header section-fixed" >这是section-header {{toptexxt}}</view>
</view>
<view wx:for="{{testData}}" wx:key="{{testData}}">
<view>
<view class='section-cell' id='top{{item}}'>{{item}} </view>
<view wx:for="{{testData2}}" wx:key="{{testData2}}">
<view class='section-cell2' id='child{{item}}'>{{item}}</view>
</view>
</view>
</view>
</view>
/**index.wxss**/
.section-placeholder {
background-color: white;
}
.section-fixed {
position: fixed;
top: 0;
}
.header {
height: 300rpx;
width: 750rpx;
background-color: bisque;
}
.section-header {
height: 80rpx;
width: 750rpx;
background-color: rebeccapurple;
}
.section-cell {
width: 750rpx;
height:80rpx;
background-color: gold;
margin-top: 2rpx;
}
.section-cell2 {
height: 50rpx;
width: 750rpx;
background-color: darkred;
}
图片效果
网友评论