最近开发小程序的时候遇到这样一个需求:如图1

页面向下滚动到白色导航的位置时,白色导航固定到页面最上方;当页面向上滚动到白色导航时,白色导航恢复到原始位置;点击各个导航,平滑的跳到相应位置。

思路1:

1.给导航设置position: absolute; 页面向下滚动到白色导航的位置时,将给导航设置为position: fixed;

2.绑定小程序滚动事件bindscroll,监听滚动距离;

代码如下:

wxml:

<scroll-view class="layout" bindscroll='layoutScroll' scroll-y="true" >
<view class='banner'>
<text>我是一个banner</text>
</view>
<!-- 导航开始 -->
<view class='nav clearfix {{navFixed?"positionFixed":""}}'>
<view class='nav_row'>
<text>导航1</text>
</view>
<view class='nav_row'>
<text>导航2</text>
</view>
<view class='nav_row'>
<text>导航3</text>
</view>
<view class='nav_row'>
<text>导航4</text>
</view>
</view>
<!-- 导航结束 -->
<!-- 内容开始 -->
<view class='content content1'>
<text>我是内容1</text>
</view>
<view class='content content2'>
<text>我是内容2</text>
</view>
<view class='content content3'>
<text>我是内容3</text>
</view>
<view class='content content4'>
<text>我是内容4</text>
</view>
<!-- 内容结束 -->
</scroll-view>

wxss:

.clearfix:after {
content: ".";
display: block;
height:;
clear: both;
visibility: hidden;
}
.positionFixed{
position: fixed;
left:;
top:;
} page{
width: 100%;
height:100%;
}
.layout{
width: 100%;
height: 100%;
background: #eee;
}
.banner{
width: 100%;
height: 200px;
line-height: 200px;
background: #FFB11A ; }
.banner text{
text-align: center;
display: block;
}
.nav{
width: 100%;
height: 45px;
line-height: 45px;
background: #fff;
}
.nav_row{
float: left;
width: 25%;
font-family: PingFangSC-Light;
font-size: 16px;
color: #333333;
}
.nav_row text{
text-align: center;
display: block;
}
.content {
width: 100%;
height: 200px;
font-family: PingFangSC-Light;
font-size: 16px;
color: #333333;
padding: 15px;
}
.content1{
background: #F5BBA4;
}
.content2{
background: #E9ED9A;
}
.content3{
background: #9DE59C;
}
.content4{
background: #98A5E2;
}

js:

Page({
data: {
scrollTop:'', //滑动的距离
navFixed:false, //导航是否固定
},
//页面滑动
layoutScroll: function (e) {
this.data.scrollTop = this.data.scrollTop * 1 + e.detail.deltaY * 1;
console.log(this.data.scrollTop)
console.log(this.data.navFixed)
if (this.data.scrollTop <= -200){
this.setData({
navFixed:true
})
}else{
this.setData({
navFixed: false
})
}
}
})

这个代码能基本实现需求,但是存在很大的弊端:

1.导航固定后,页面卡顿一下

2.导航效果延迟较长,用户体验很差

总体来说这种方案并不可取,所以进行第二次迭代

思路2:

未完待续。。。

注意:

1.整个滑动的页面应该写在scroll-view中;

2.scroll-view一定

微信小程序--导航跟随的更多相关文章

  1. 微信小程序-导航 & 路由

    微信小程序-导航 & 路由 页面跳转 页面路由 页面栈, 框架以栈的形式维护了当前的所有页面. https://developers.weixin.qq.com/miniprogram/dev ...

  2. 自定义微信小程序导航(兼容各种手机)

    详细代码请见github,请点击地址,其中有原生小程序的实现,也有wepy版本的实现 了解小程序默认导航 如上图所示,微信导航分为两部分,第一个部分为statusBarHeight,刘海屏手机(iPh ...

  3. 微信小程序——导航栏组件

    组件内属性详解   属性 类型 默认值 必填 说明 nav-postion String relative 否 导航栏(包含导航栏以及状态栏)的position,可取值relative.fixed.a ...

  4. 微信小程序导航:官方工具+精品教程+DEMO集合(1月7更新)

    1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=14764346784612:简易教程:https://mp.weixin.qq.com/debug ...

  5. 微信小程序------导航栏样式、tabBar导航栏

    一:导航栏样式设置 小程序的导航栏样式在app.json中定义. 这里设置导航,背景黑色,文字白色,文字内容测试小程序 app.json内容: { "pages":[ " ...

  6. 微信小程序 导航(a 连接)自定义组件

    导航:navigator 组件 组件上的属性: target:跳到其他小程序( 默认是当前小程序 ),当属性值为 miniProgram 时,跳到别的小程序(如果要跳到别的小程序,需要填写 appid ...

  7. 微信小程序导航栏,下面内容滑动,上册导航栏跟着滑动,内容随着导航栏滑动

    16.类似微信导航栏滑动.png 今日头条导航栏,下面滑动上面跟着滑动 index.wxml <swiper class="content" style="heig ...

  8. 微信小程序---导航

    1.wx.navigateTo(OBJECT):保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面. wx.navigateTo({ url: 'test?id= ...

  9. 微信小程序导航设置

    "tabBar": { "backgroundColor": "#ffffff", "color": "#00 ...

随机推荐

  1. vue cli2.x配置多环境打包

    一.安装 npm install --save-dev cross-env 二.配置步骤 1.修改config下的文件 //test.env.js 'use strict' module.export ...

  2. (转)[视频压制/转换技术] I帧 B帧 P帧 IDR帧 等帧用途详细说明

    转:http://www.u2game.net/bbs/thread-46116-1-1.html 在视频压制.转换中,经常会看到:I帧 B帧 P帧 IDR帧 等名词,这里就是通用的解释一下这些帧的用 ...

  3. Big Number HDU - 1212

    As we know, Big Number is always troublesome. But it's really important in our ACM. And today, your ...

  4. Minifilter 相关

    FLTFL_OPERATION_REGISTRATION_SKIP_PAGING_IO 商用软件一定要过滤掉这个类型的请求,这个类型的请求响应非常慢. FLTFL_OPERATION_REGISTRA ...

  5. JS数组 呼叫团里成员(使用数组元素) myarray[0]

    呼叫团里成员(使用数组元素) 我们知道数组中的每个值有一个索引号,从0开始,如下图, myarray变量存储6个人的成绩:   要得到一个数组元素的值,只需引用数组变量并提供一个索引,如: 第一个人的 ...

  6. 警告(alert 消息对话框) 如果你不点击“确定”,就不能对网页做任何操作,这个小窗口就是使用alert实现的

    警告(alert 消息对话框) 我们在访问网站的时候,有时会突然弹出一个小窗口,上面写着一段提示信息文字.如果你不点击"确定",就不能对网页做任何操作,这个小窗口就是使用alert ...

  7. php socket模拟http中post或get提交数据

    php socket模拟http中post或者get提交数据的示例代码. 代码: sock_post.php: <?php /** * php socket模拟post\get请求 * 编辑:脚 ...

  8. [转]MEF学习

    MEF学习 :http://www.cnblogs.com/comsokey/p/MEF1.html C#可扩展编程之MEF学习笔记(一):MEF简介及简单的Demo C#可扩展编程之MEF学习笔记( ...

  9. pg总览

    一.编译安装初始化等 ./configure --prefix=/release --with-openssl --without-ldap --with-libxml - -enable-threa ...

  10. Joomla - 菜单系统 (从创建到前端页面显示的过程)

    在 Joomla 中,菜单是最常用且重要的功能之一,一般用于承载页面内容和各内容间的切换.导航等,演绎着非常重要的角色: 一.新建菜单 进入后台,点击顶栏菜单 -> 菜单管理 -> 点击新 ...