相关文章推荐

二、实现原理

在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;
// pages/gzj/gzj.js
Page({
  data: {
    Navigation:[
      "提出问题",
      "解答问题",
      "吸收经验"
  onPageScroll: function (e) {//监听页面滚动
    this.setData({
      scrollTop: e.scrollTop

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

本人专注于Android/java/数据库/微信小程序技术领域的开发,以及有好几年的计算机毕业设计方面的实战开发经验和技术积累;尤其是在安卓(Android)的app的开发和微信小程序的开发,很是熟悉和了解;本人也是多年的Android开发人员;希望我发布的此篇文件可以帮助到您;🍅。 <!--导航条--> <view class="navbar"> <text wx:for="{{navbar}}" data-idx="{{index}}" class="item {{currentTab==index ? 'active' : ''}}" wx:key="unique" bindtap="navbarTap">{{item}}... 2.当某个页不需要头部样式,需要覆盖全屏只留下返回胶囊时,可以在指定page页下的json文件内添加"navigationStyle": "custom"3.当不使用官方的标题栏时,你也可以设计自己的头部栏,下面是我自己的,效果为logo图靠左居中(靠左是考虑到部分手机的灵动岛遮挡),大家可以自己更改细节。1.在各个页添加头部固定样式,可以在app.json内设置。navigationBarTitleText:标题名称。navigationStyle:导航栏样式。        在使用HbuilderX开发微信小程序时(在HbuilderX中写代码,在微信开发者工具编译),由于微信小程序自带的导航栏功能少,样式单一等,于是采用colorUI自定义导航栏实现需求。而问题就一而再再而三的出现了: 自定义导航栏导致系统自带的下拉刷新不能用(官方回应这是微信小程序的bug) 采用HbuilderX自带的scroll-view组件的下拉刷新 但scroll-view在微信小程序却出现了: 无限刷新问题 微信小程序实现自定义导航栏,可滑动导航栏和非滑动导航栏欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好! 这是你第一次使用 Markdown编辑器 所展示的 二、代码: wxml: <scroll-view class="tab stickyClass" scroll-x scroll-left="{{tabScroll}}" scroll-with-animation="true"> <block wx:for="{{menuList}}" wx:ke...
 
推荐文章