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


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 相关文章推荐
自适应图片大小的弹出窗口
Jul 27 Javascript
JavaScript 利用Cookie记录用户登录信息
Dec 08 Javascript
推荐一个自己用的封装好的javascript插件
Jan 29 Javascript
基于jquery实现放大镜效果
Aug 17 Javascript
常用的js方法合集
Mar 10 Javascript
JavaScript使用readAsDataUrl方法预览图片
May 10 Javascript
JavaScript实现购物车基本功能
Jul 21 Javascript
基于jQuery实现的单行公告活动轮播效果
Aug 23 jQuery
vue params、query传参使用详解
Sep 12 Javascript
JS数组push、unshift、pop、shift方法的实现与使用方法示例
Apr 29 Javascript
js实现幻灯片轮播图
Aug 14 Javascript
js实现直播点击飘心效果
Aug 19 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 获取全局变量的代码
2011/04/21 PHP
PHP操作MongoDB时的整数问题及对策说明
2011/05/02 PHP
phpQuery占用内存过多的处理方法
2013/11/13 PHP
php防止站外远程提交表单的方法
2014/10/20 PHP
smarty模板引擎中自定义函数的方法
2015/01/22 PHP
实例讲解PHP中使用命名空间
2019/01/27 PHP
laravel 中某一字段自增、自减的例子
2019/10/11 PHP
php使用redis的有序集合zset实现延迟队列应用示例
2020/02/20 PHP
潜说js对象和数组
2011/05/25 Javascript
js检测输入内容全为空格的方法
2014/05/03 Javascript
javascript中bind函数的作用实例介绍
2014/09/28 Javascript
Javascript学习指南
2014/12/01 Javascript
JavaScript实现横线提示输入验证码随输入验证码输入消失的方法
2016/09/24 Javascript
jQuery按需加载轮播图(web前端性能优化)
2017/02/17 Javascript
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
2018/07/31 jQuery
vue-cli3环境变量与分环境打包的方法示例
2019/02/18 Javascript
JS实现网站吸顶条
2020/01/08 Javascript
在Python中使用Neo4j数据库的教程
2015/04/16 Python
Python结巴中文分词工具使用过程中遇到的问题及解决方法
2017/04/15 Python
Python实现获取命令行输出结果的方法
2017/06/10 Python
TensorFLow 不同大小图片的TFrecords存取实例
2020/01/20 Python
python实现猜数游戏(保存游戏记录)
2020/06/22 Python
python中count函数知识点浅析
2020/12/17 Python
一款恶搞头像特效的制作过程 利用css3和jquery
2014/11/21 HTML / CSS
CSS3 分类菜单效果
2019/05/27 HTML / CSS
html5 CSS过度-webkit-transition使用介绍
2013/07/02 HTML / CSS
廉价航班、机票和酒店:JustFly
2018/02/07 全球购物
澳大利亚著名的纺织品品牌:Canningvale
2020/05/05 全球购物
政府采购方案
2014/06/12 职场文书
奶茶店创业计划书
2014/08/14 职场文书
2014年教师节演讲稿范文
2014/09/10 职场文书
员工开除通知书
2015/04/25 职场文书
从事会计工作年限证明
2015/06/23 职场文书
二胎满月酒致辞
2015/07/29 职场文书
家长会后的感想
2015/08/11 职场文书
golang定时器
2022/04/14 Golang