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


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 相关文章推荐
浅谈JavaScript中面向对象技术的模拟
Sep 25 Javascript
firefox中用javascript实现鼠标位置的定位
Jun 17 Javascript
jquery下拉select控件操作方法分享(jquery操作select)
Mar 25 Javascript
Node.js中创建和管理外部进程详解
Aug 16 Javascript
深入理解JavaScript的React框架的原理
Jul 02 Javascript
json对象与数组以及转换成js对象的简单实现方法
Jun 24 Javascript
原生Javascript插件开发实践
Jan 09 Javascript
mongoose中利用populate处理嵌套的方法
May 26 Javascript
AngularJS实用基础知识_入门必备篇(推荐)
Jul 10 Javascript
移动web开发之touch事件实例详解
Jan 17 Javascript
layui实现数据分页功能(ajax异步)
Jul 27 Javascript
js+for循环实现字符串自动转义的代码(把后面的字符替换前面的字符)
Dec 24 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
PHP 第三节 变量介绍
2012/04/28 PHP
CentOS 6.2使用yum安装LAMP以及phpMyadmin详解
2013/06/17 PHP
浅析SVN常见问题及解决方法
2013/06/21 PHP
PHP4和PHP5版本下解析XML文档的操作方法实例分析
2017/05/20 PHP
浅析PHP7 的垃圾回收机制
2019/09/06 PHP
Laravel 将数据表的数据导出,并生成seeds种子文件的方法
2019/10/09 PHP
PHP 计算两个时间段之间交集的天数示例
2019/10/24 PHP
Mozilla中显示textarea中选择的文字
2006/09/07 Javascript
Javascript优化技巧(文件瘦身篇)
2008/01/28 Javascript
Jquery replace 字符替换实现代码
2010/12/02 Javascript
jquery ajax 同步异步的执行 return值不能取得的解决方案
2012/01/08 Javascript
JS简单实现文件上传实例代码(无需插件)
2013/11/15 Javascript
原生JS绑定滑轮滚动事件兼容常见浏览器
2014/06/30 Javascript
js中数组排序sort方法的原理分析
2014/11/20 Javascript
node.js中的fs.ftruncate方法使用说明
2014/12/15 Javascript
JS实现仿苹果底部任务栏菜单效果代码
2015/08/28 Javascript
JavaScript面试出现频繁的一些易错点整理
2018/03/29 Javascript
webpack4 处理SCSS的方法示例
2018/09/03 Javascript
ES6小技巧之代替lodash
2019/06/07 Javascript
详解Webpack如何引入CDN链接来优化编译后的体积
2019/06/21 Javascript
Vue数据双向绑定原理实例解析
2020/05/15 Javascript
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
2020/08/31 Javascript
python使用三角迭代计算圆周率PI的方法
2015/03/20 Python
Python3导入自定义模块的三种方法详解
2018/04/13 Python
对python 命令的-u参数详解
2018/12/03 Python
python 函数内部修改外部变量的方法
2018/12/18 Python
pytorch中nn.Conv1d的用法详解
2019/12/31 Python
详解pycharm连接不上mysql数据库的解决办法
2020/01/10 Python
Python 爬虫的原理
2020/07/30 Python
Python类绑定方法及非绑定方法实例解析
2020/10/09 Python
美国折扣香水网站:The Perfume Spot
2020/12/12 全球购物
天游软件面试
2013/11/23 面试题
七夕情人节促销方案
2014/06/07 职场文书
2015年文员个人工作总结
2015/04/09 职场文书
CSS3实现列表无限滚动/轮播效果
2021/06/23 HTML / CSS
单机多实例部署 MySQL8.0.20
2022/05/15 MySQL