微信小程序?qū)崿F(xiàn)監(jiān)聽頁面滾動

更新時間：2022年06月29日 16:17:57 作者：by__csdn

這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)監(jiān)聽頁面滾動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了微信小程序?qū)崿F(xiàn)監(jiān)聽頁面滾動的具體代碼，供大家參考，具體內(nèi)容如下

1.正常狀態(tài)下

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
? ? },
? ? // 監(jiān)聽頁面
? ? 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;
}

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: