小程序固定导航栏在顶部，跟随下滑

Posted 2021-12-13 Z_hongli

【小程序】固定导航栏在顶部，跟随下滑

• 一、效果演示
• 二、实现原理
• 三、相关代码
• • 1.说明（一定要看）
  • 2.相关代码
  • • 1.wxml
    • 2.wxss
    • 3.js

一、效果演示

二、实现原理

在js中有一个函数是用来监听页面的滑动的，这个函数叫做onPageScroll，下面是我从官网上面查到的有关信息

我们可以利用这个函数的功能，获取页面在垂直方向已经滚动的距离，当滚动的距离达到一定数值时，我们通过js来改变样式，让原有的模块固定住不再移动

三、相关代码

1.说明（一定要看）

我把整个页面的代码全部拷过来了，wxml中最上面的部分是导航栏的
wxss中最下面的两个样式是对应的样式
js中的onPagescroll是关键代码

2.相关代码

1.wxml

中间很多空view是为了流出空间可以用来下滑
里面的图片需要自己导入自己的图片

<view class="{{scrollTop>145 ? 'topnavFixed' : 'topnavAbsolute'}}" >
  <view class="top_Navigation">
    <view class="Nav_tiems" wx:for="{{Navigation}}">
        <text class="Nav_text">{{item}}</text>
    </view>
</view>
</view>

<view class="top_serach">
     <view class="search_border">
          <image class="search_icon" src="/images/01.jpg"></image>
          <input class="input" placeholder="请输入文字"></input>
     </view>
     <image class="Create_image" src="/images/01.jpg"></image>
</view>

<view class="container">
 
</view>

<view class="container">
 
</view>
<view class="container">
 
</view>
<view class="container">
 
</view>
<view class="container">
 
</view>
<view class="container">
 
</view>

<view class="container">
 
</view>


<view class="top_Navigation">
    <view class="Nav_tiems" wx:for="{{Navigation}}">
        <text class="Nav_text">{{item}}</text>
    </view>
</view>

2.wxss

/* pages/gzj/gzj.wxss */
.search_border{
   width: 85%;
   height: 80rpx;
   border-radius: 25rpx;
   display: flex;
   align-items: center;
   background: rgb(220, 221, 218);
}

.top_serach{
  width: 100%;
  margin-top: 10rpx;
  display: flex;
  flex-direction: row;
}

.input{
  width: 600rpx;
  margin-left: 20rpx;
}

.search_icon{
  margin-left: 30rpx;
  width: 60rpx;
  height: 60rpx;
}

.top_Navigation{
  width: 100%;
  height: 100rpx;
  background: cadetblue;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.Nav_tiems{
  width: 25%;
  height: 100rpx;
  background: cornflowerblue;
}

.Nav_text{
  height: 100rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.Create_image{
  width: 75rpx;
  height: 75rpx;
  display: flex;
  align-items: center;
  margin-left: 20rpx;
}

.topnavFixed{
  border-top-left-radius:20rpx;
  border-top-right-radius:20rpx;
  position:fixed;width:100%;height:100rpx; top:0rpx;background:white;z-index: 1;
  }
  .topnavAbsolute{
  border-top-left-radius:20rpx;
  border-top-right-radius:20rpx;
  position:absolute;width:100%;height:100rpx; top:340rpx//top值会影响组件到屏幕顶端的距离，以及影响下拉时造成的闪动 适当调小后可以解决闪动问题 ;background:white;z-index: 1;
  }

3.js

// pages/gzj/gzj.js
Page({

 
  data: {
    Navigation:[
      "提出问题",
      "解答问题",
      "吸收经验"
    ]

  },

  onPageScroll: function (e) {//监听页面滚动
    this.setData({
      scrollTop: e.scrollTop
    })
  },

})

本文章收录于我的小程序目录中，点击我的主页即可看见我的小程序目录，里面还有更多有关小程序的内容且不断更新！可以的话点个赞吧！