微信小程序实现页面浮动导航


Posted in Javascript onJanuary 08, 2020

一、前言

做复杂的小程序就与web页面的区别原来越小了,一些web页面的功能会被要求添加到微信小程序页面中。

二、功能

页面在滑动的时候顶部页面导航跟随滑动,当点击导航中的任意一项时返回页面顶部。

三、实现

wxml代码:

<view class='container'>
<view class='navigation {{pageVariable.isFloat == true ? "float-navigation":""}}'>
  <view class='{{policyFilter.curSelectNavigationItemFormate(pageVariable.curSelectedItemId,"0")}}' data-id='0' catchtap='selectNavigationItem'>全部</view>
  <view class='{{policyFilter.curSelectNavigationItemFormate(pageVariable.curSelectedItemId,"1")}}' data-id='1' catchtap='selectNavigationItem'>保障中</view>
  <view class='{{policyFilter.curSelectNavigationItemFormate(pageVariable.curSelectedItemId,"2")}}' data-id='2' catchtap='selectNavigationItem'>已生效</view>
  <view class='{{policyFilter.curSelectNavigationItemFormate(pageVariable.curSelectedItemId,"3")}}' data-id='3' catchtap='selectNavigationItem'>未生效</view>
 </view>
</view>

wxss代码:

.navigation {  /*导航样式*/
 width: 100%;
 display: flex;
 justify-content: space-around;
 align-items: center;
 height: 80rpx;
 background-color: #fff;
 font-size: 28rpx;
 color: #333;
 font-weight: 500;
 box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.30);
}
 
.float-navigation {  /*导航浮动起来的css*/
 position: fixed;
 top: 0;
 z-index: 1000;
}
 
.navigation-item-selected {  /*导航项选中的样式*/
 color: #40a0ee;
 height: 80rpx;
 line-height: 80rpx;
 border-bottom: 3rpx solid #40a0ee;
}

js代码:

Page({
  data:function () {
  var model = {};
  model.pageVariable = {
   curSelectedItemId:'0', //顶部导航栏,当前选中的项
   isFloat:false, //控制导航栏浮动
  }
  return model;
 }(),
 /**
  * 选择导航
  */
 selectNavigationItem:function(e){
  this.setData({
   'pageVariable.curSelectedItemId': e.currentTarget.dataset.id,
   'pageVariable.isFloat':false
  });
  wx.pageScrollTo({
   scrollTop: 0,
  });
  this.initData(e.currentTarget.dataset.id);  //加载数据
 },
 onPageScroll:function(res){
  if (res.scrollTop >= 1){ //开始滚动
   if (!this.data.pageVariable.isFloat){
    this.setData({
     'pageVariable.isFloat':true
    });
   }
  }else{
   this.setData({
    'pageVariable.isFloat': false
   });
  }
 }
})

总结:

这个功能的实现主要是通过onPageScroll页面注册函数来实现页面滚动,通过pageScrollTo api实现导航选项在被选中时返回到页面顶部。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js里取容器大小、定位、距离等属性搜集整理
Aug 19 Javascript
jquery设置元素的readonly和disabled的写法
Sep 22 Javascript
jQuery实现动画效果circle实例
Aug 06 Javascript
JS实现横向拉伸动感伸缩菜单效果代码
Sep 04 Javascript
利用AJAX实现WordPress中的文章列表及评论的分页功能
May 17 Javascript
angularjs 源码解析之scope
Aug 22 Javascript
jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
Apr 20 jQuery
ES6 javascript中class静态方法、属性与实例属性用法示例
Oct 30 Javascript
echarts学习笔记之图表自适应问题详解
Nov 22 Javascript
webpack中使用iconfont字体图标的方法
Feb 22 Javascript
35个最好用的Vue开源库(史上最全)
Jan 03 Javascript
详解Vue依赖收集引发的问题
Apr 22 Javascript
微信小程序基于movable-view实现滑动删除效果
Jan 08 #Javascript
小程序自定义模板实现吸顶功能
Jan 08 #Javascript
微信小程序静默登录的实现代码
Jan 08 #Javascript
微信小程序wxs实现吸顶效果
Jan 08 #Javascript
微信小程序实现吸顶特效
Jan 08 #Javascript
nuxt配置通过指定IP和端口访问的实现
Jan 08 #Javascript
JS如何实现网站中PC端和手机端自动识别并跳转对应的代码
Jan 08 #Javascript
You might like
MYSQL环境变量设置方法
2007/01/15 PHP
修改了一个很不错的php验证码(支持中文)
2007/02/14 PHP
PHP 程序员应该使用的10个组件
2009/10/31 PHP
CI(CodeIgniter)框架介绍
2014/06/09 PHP
WordPress开发中自定义菜单的相关PHP函数使用简介
2016/01/05 PHP
PHP中explode函数和split函数的区别小结
2016/08/24 PHP
PHP Callable强制指定回调类型的方法
2016/08/30 PHP
PHP中类与对象功能、用法实例解读
2020/03/27 PHP
JavaScript访问样式表代码
2010/10/15 Javascript
IE图片缓存document.execCommand(&quot;BackgroundImageCache&quot;,false,true)
2011/03/01 Javascript
自己动手制作jquery插件之自动添加删除行的实现
2011/10/13 Javascript
Firefox中beforeunload事件的实现缺陷浅析
2012/05/03 Javascript
利用jquery包将字符串生成二维码图片
2013/09/12 Javascript
jQuery jcrop插件截图使用方法
2013/11/20 Javascript
原生javascript实现隔行换色
2015/01/04 Javascript
JS实现仿QQ面板的手风琴效果折叠菜单代码
2015/09/11 Javascript
javaScript数组迭代方法详解
2016/04/14 Javascript
jQuery 翻页组件yunm.pager.js实现div局部刷新的思路
2016/08/11 Javascript
jQuery中 bind的用法简单介绍
2017/02/13 Javascript
基于Bootstrap表单验证功能
2017/11/17 Javascript
基于Proxy的小程序状态管理实现
2019/06/14 Javascript
js实现坦克移动小游戏
2019/10/28 Javascript
一看就会的vuex实现登录验证(附案例)
2020/01/09 Javascript
[42:04]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第一局
2016/03/03 DOTA
Python实现partial改变方法默认参数
2014/08/18 Python
Python自动生产表情包
2017/03/17 Python
用Python实现最速下降法求极值的方法
2019/07/10 Python
基于python实现从尾到头打印链表
2019/11/02 Python
Python 制作查询商品历史价格的小工具
2020/10/20 Python
Python APScheduler执行使用方法详解
2020/12/10 Python
英文翻译的自我评价语句
2013/10/04 职场文书
药品采购员岗位职责
2014/02/08 职场文书
营销与策划实训报告
2014/11/05 职场文书
先进个人材料怎么写
2014/12/30 职场文书
2015年图书馆个人工作总结
2015/05/26 职场文书
Oracle 死锁的检测查询及处理
2021/09/25 Oracle