微信小程序实现监听页面滚动
作者:by__csdn
这篇文章主要为大家详细介绍了微信小程序实现监听页面滚动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了微信小程序实现监听页面滚动的具体代码,供大家参考,具体内容如下
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; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。