微信小程序实现监听页面滚动
本文实例为大家分享了微信小程序实现监听页面滚动的具体代码，供大家参考，具体内容如下
1.正常状态下
2.页面滚动到大于100时显示定位到顶部的view盒子
3.html部分
<view class="question">
<!-- 顶部Banner图 -->
<view class="qBanner" >
<image class="qBannera" src="../../../images/question/banner.png" alt=""></image>
<image class="qBesc" src="../../../images/question/esc.png" alt="" bindtap="esc"></image>
<text class="qBtxt">问答</text>
<view class="sousuo">
<image src="../../../images/question/sousuo.png"></image>
<input type="text" placeholder="搜索" value="{{ value }}" bind:change="onChange" bindconfirm="search" />
</view>
</view>
<!-- 定位 -->
<view class="fix" wx:if="{{fixs == 0}}">
<image src="../../../images/question/escs.png" alt="" bindtap="esc"></image>
<view>
<image src="../../../images/question/sousuo.png"></image>
<input type="text" placeholder="搜索" value="{{ value }}" bind:change="onChange" bindconfirm="search" />
</view>
</view>
</view>
4.js部分
Page({
data: {
fixs:1
},
// 监听页面
onPageScroll(e) {
console.log(e.scrollTop)
if(e.scrollTop > 100){
this.setData({
fixs: 0
});
} else {
this.setData({
fixs: 1
});
}
},
})
5.css部分
/* 总盒子 */
.question{
width: 100%;
background: #F4F4F7;
position: relative;
}
/* 顶部banner盒子 */
.qBanner{
width: 100%;
height: 454rpx;
position: relative;
}
/* 背景图 */
.qBannera{
width: 100%;
height: 100%;
}
/* 自定义导航栏返回按钮 */
.qBesc{
width: 34rpx;
height: 34rpx;
position: absolute;
top: 114rpx;
left: 54rpx;
}
/* 自定义导航栏标题 */
.qBtxt{
width: 72rpx;
height: 50rpx;
font-size: 36rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #232326;
position: absolute;
top: 108rpx;
left: 46%;
/* transform: translate(-0.01%,-50%); */
}
/* 搜索盒子 */
.sousuo{
position: absolute;
top: 186rpx;
left: 58rpx;
background: #FFFFFF;
width: 640rpx;
height: 72rpx;
border: 2rpx solid #EFF0F4;
border-radius: 36rpx;
}
.sousuo image{
position: absolute;
width: 28rpx;
height: 28rpx;
top: 20rpx;
left: 20rpx;
}
.sousuo input{
width: 90%;
height: 100%;
margin-left: 60rpx;
}
/* 滚动导航栏定位 */
.fix{
width: 100%;
height: 176rpx;
background: #876BF4;
position: fixed;
top: 0;
left: 0;
display: flex;
justify-content: flex-start;
align-items: flex-end;
}
.fix image{
width: 34rpx;
height: 34rpx;
margin-left: 54rpx;
margin-bottom: 27rpx;
}
.fix view{
width: 384rpx;
height: 72rpx;
margin-bottom: 8rpx;
margin-left: 62rpx;
position: relative;
background: #FFFFFF;
border-radius: 38rpx;
border: 2rpx solid #EFF0F4;
overflow: hidden;
}
.fix view input{
width: 83%;
height: 100%;
float: right;
}
.fix view image{
position: absolute;
top: 20rpx;
left: -30rpx;
width: 28rpx;
height: 28rpx;
}
.input-placeholder{
font-size: 28rpx;
font-family: PingFang-SC-Regular, PingFang-SC;
font-weight: 400;
color: #D2D2D5;
}
