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


Posted in Javascript onJanuary 28, 2019

一、前言

做复杂的小程序就与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 通过模式匹配实现重载
Aug 12 Javascript
jQuery中fadeIn、fadeOut、fadeTo的使用方法(图片显示与隐藏)
May 08 Javascript
document.write()及其输出内容的样式、位置控制
Aug 12 Javascript
在javascript中执行任意html代码的方法示例解读
Dec 25 Javascript
jQuery写fadeTo示例代码
Feb 21 Javascript
如何实现JavaScript动态加载CSS和JS文件
Dec 28 Javascript
JavaScript的函数式编程基础指南
Mar 19 Javascript
js简单实现调整网页字体大小的方法
Jul 23 Javascript
手机端点击图片放大特效PhotoSwipe.js插件实现
Aug 24 Javascript
javascript-解决mongoose数据查询的异步操作
Dec 22 Javascript
JS禁止浏览器右键查看元素或按F12审查元素自动关闭页面示例代码
Sep 07 Javascript
JavaScript实现点击出现图片并统计点击次数功能示例
Jul 23 Javascript
微信小程序顶部导航栏滑动tab效果
Jan 28 #Javascript
详解基于node.js的脚手架工具开发经历
Jan 28 #Javascript
微信小程序实现顶部导航特效
Jan 28 #Javascript
详解几十行代码实现一个vue的状态管理
Jan 28 #Javascript
vue.js仿hover效果的实现方法示例
Jan 28 #Javascript
vue-for循环嵌套操作示例
Jan 28 #Javascript
使用pm2自动化部署node项目的方法步骤
Jan 28 #Javascript
You might like
PHP在字符串中查找指定字符串并删除的代码
2008/10/02 PHP
php中判断字符串是否全是中文或含有中文的实现代码
2011/09/16 PHP
php preg_replace替换实例讲解
2013/11/04 PHP
thinkphp浏览历史功能实现方法
2014/10/29 PHP
PHP explode()函数的几个应用和implode()函数有什么区别
2015/11/05 PHP
THinkPHP获取客户端IP与IP地址查询的方法
2016/11/14 PHP
php实现的生成迷宫与迷宫寻址算法完整实例
2017/11/06 PHP
php 使用 __call实现重载功能示例
2019/11/18 PHP
JQuery的AJAX实现文件下载的小例子
2013/05/15 Javascript
原生JS实现表单checkbook获取已选择的值
2013/07/21 Javascript
JavaScript实现点击自动选择TextArea文本的方法
2015/07/02 Javascript
jQuery插件扩展extend的简单实现原理
2016/06/24 Javascript
Javascript的动态增加类的实现方法
2016/10/20 Javascript
javascript实现文字无缝滚动效果
2017/08/26 Javascript
vue引入axios同源跨域问题
2018/09/27 Javascript
简单了解JavaScript中常见的反模式
2019/06/21 Javascript
微信小程序地图绘制线段并且测量(实例代码)
2020/01/02 Javascript
简单谈谈python中的语句和语法
2017/08/10 Python
python圣诞树编写实例详解
2020/02/13 Python
python自动脚本的pyautogui入门学习
2020/04/01 Python
python使用numpy中的size()函数实例用法详解
2021/01/29 Python
canvas使用注意点总结
2013/07/19 HTML / CSS
New Era英国官网:美国棒球帽品牌
2018/03/21 全球购物
小橄榄树:Le Petit Olivier
2018/04/23 全球购物
微软新西兰官方网站:Microsoft New Zealand
2018/08/17 全球购物
台湾屈臣氏网路商店:Watsons台湾
2020/12/29 全球购物
幼儿师范毕业生自荐信
2013/11/09 职场文书
开学典礼感言
2014/02/16 职场文书
开业庆典策划方案
2014/02/18 职场文书
高中军训的心得体会
2014/09/01 职场文书
刑事辩护词范文
2015/05/21 职场文书
长江七号观后感
2015/06/11 职场文书
大学新生入学感想
2015/08/07 职场文书
毕业生自我鉴定范文
2019/05/13 职场文书
CSS实现九宫格布局(自适应)的示例代码
2022/02/12 HTML / CSS
抖音动画片,皮皮虾,《治愈系》动画在用这首REMIX作为背景音乐,Anak ,The last world with you完整版
2022/03/16 杂记