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


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 相关文章推荐
isArray()函数(JavaScript中对象类型判断的几种方法)
Nov 26 Javascript
jQuery + Flex 通过拖拽方式动态改变图片的代码
Aug 03 Javascript
基于JavaScript代码实现pc与手机之间的跳转
Dec 23 Javascript
javascript中加var和不加var的区别 你真的懂吗
Jan 06 Javascript
jquery操作checkbox火狐下第二次无法勾选的解决方法
Oct 10 Javascript
原生javascript实现读写CSS样式的方法详解
Feb 20 Javascript
利用jQuery解析获取JSON数据
Apr 08 jQuery
微信小程序 本地数据存储实例详解
Apr 13 Javascript
详解Vue爬坑之vuex初识
Jun 14 Javascript
vue实现滑动切换效果(仅在手机模式下可用)
Jun 29 Javascript
解决vue addRoutes不生效问题
Aug 04 Javascript
JS PHP字符串截取函数实现原理解析
Aug 29 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
phpmyadmin操作流程
2006/10/09 PHP
setAttribute 与 class冲突解决
2008/02/17 Javascript
JavaScript中null与undefined分析
2009/07/25 Javascript
基于jquery1.4.2的仿flash超炫焦点图播放效果
2010/04/20 Javascript
JavaScript实现的内存数据库LokiJS介绍和入门实例
2014/11/17 Javascript
JQuery 的跨域方法推荐_可跨任何网站
2016/05/18 Javascript
jQuery EasyUI 入门必看
2016/06/03 Javascript
静态页面html中跳转传值的JS处理技巧
2016/06/22 Javascript
JavaScript使用Range调色及透明度实例
2016/09/25 Javascript
JavaScript 中 avalon绑定属性总结
2016/10/19 Javascript
jquery 判断div show的状态实例
2016/12/03 Javascript
微信小程序开发教程-手势解锁实例
2017/01/06 Javascript
JavaScript实现重力下落与弹性效果的方法分析
2017/12/20 Javascript
JavaScript类的继承多种实现方法
2020/05/30 Javascript
echarts实现获取datazoom的起始值(包括x轴和y轴)
2020/07/20 Javascript
node脚手架搭建服务器实现token验证的方法
2021/01/20 Javascript
[33:33]完美世界DOTA2联赛PWL S2 FTD.C vs SZ 第二场 11.27
2020/11/30 DOTA
在Python的gevent框架下执行异步的Solr查询的教程
2015/04/16 Python
Python的Django框架中模板碎片缓存简介
2015/07/24 Python
python画图系列之个性化显示x轴区段文字的实例
2018/12/13 Python
Python基础教程之异常详解
2019/01/10 Python
pycharm 对代码做静态检查操作
2020/06/09 Python
Python爬虫与反爬虫大战
2020/07/30 Python
学会迭代器设计模式,帮你大幅提升python性能
2021/01/03 Python
Maison Lab荷兰:名牌Outlet购物
2018/08/10 全球购物
药剂专业求职信
2014/06/20 职场文书
个人三严三实对照检查材料
2014/09/25 职场文书
村干部群众路线教育活动对照检查材料
2014/10/01 职场文书
副总经理党的群众路线教育实践活动个人对照检查材料思想汇报
2014/10/06 职场文书
上班迟到检讨书300字
2014/10/18 职场文书
音乐教师个人工作总结
2015/02/06 职场文书
2015年三万活动总结
2015/03/25 职场文书
2015年学生管理工作总结
2015/05/26 职场文书
军训阅兵新闻稿
2015/07/17 职场文书
如何用Laravel包含你自己的帮助函数
2021/05/27 PHP
Java Spring 控制反转(IOC)容器详解
2021/10/05 Java/Android