最近开发小程序的时候遇到这样一个需求:如图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. luoguP1062 数列 [数学]

    题目描述 给定一个正整数k(3≤k≤15),把所有k的方幂及所有有限个互不相等的k的方幂之和构成一个递增的序列,例如,当k=3时,这个序列是: 1,3,4,9,10,12,13,… (该序列实际上就是 ...

  2. 0914CSP-S模拟测试赛后总结

    9-16 16:03-upd:T3数据出锅,老师重测了,于是更了榜单. 名次并没有变化,但是和大佬们的差距变大了. 还是自己实力不行啊.最起码T3不是特别难想吧. 继续努力吧. 粘个榜:%%%二营长. ...

  3. c&c++MFC 调用 js 函数代码

    调用函数代码和示例   Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlight ...

  4. golang中net/http包的简单使用

    一.介绍 http包提供了http客户端和服务端的实现 Get,Head,Post和PostForm函数发出http.https的请求 程序在使用完回复后必须关闭回复的主体 #简单的访问网站,由于没有 ...

  5. Wed Nov 01 13:03:16 CST 2017 WARN: Establishing SSL connection without server's identity verification is not recommended.

    报错:Wed Nov 01 13:03:16 CST 2017 WARN: Establishing SSL connection without server's identity verifica ...

  6. 基础数据类型补充 set集合 深浅拷贝

    一.基础数据类型补充 1. "拼接字符串".join(可迭代对象) 可迭代对象为列表时,输出列表元素与拼接字符串的拼接 li = ['张三', '李四', '王五', '赵四'] ...

  7. (转) Mac下面的SecureCRT(附破解方案) 更新到最新的7.3.7

    Mac下面的SecureCRT(附破解方案) 更新到最新的7.3.7 转自 http://blog.csdn.net/skykingf/article/details/17450561 http:// ...

  8. js基础应用-打字机,震动窗口

    js基础应用一,窗口震动 html+js代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...

  9. 控制类名(className 属性)设置或返回class属性

    控制类名(className 属性) className 属性设置或返回元素的class 属性. 语法: object.className = classname 作用: 1.获取元素的class 属 ...

  10. 用在 AMD64 上 aria2_1.33.1-1_amd64.deb 的下载页面

    用在 AMD64 上 aria2_1.33.1-1_amd64.deb 的下载页面 如果您正在运行 Ubuntu,请尽量使用像 aptitude 或者 synaptic 一样的软件包管理器,代替人工手 ...