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


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 动态参数判空操作
Dec 22 Javascript
jQuery 点击图片跳转上一张或下一张功能的实现代码
Mar 12 Javascript
jquery子元素过滤选择器使用示例
Jun 24 Javascript
Jquery之Bind方法参数传递与接收的三种方法
Jun 24 Javascript
jQuery打印指定区域Html页面并自动分页
Jul 04 Javascript
jquery搜索框效果实现方法
Jan 16 Javascript
js给table赋值的实例代码
Oct 13 Javascript
js操作浏览器的参数方法
Jan 21 Javascript
JS字符串统计操作示例【遍历,截取,输出,计算】
Mar 27 Javascript
js获取浏览器的各种属性
Apr 27 Javascript
vue中的ref和$refs的使用
Nov 22 Javascript
原生Js 实现的简单无缝滚动轮播图的示例代码
May 10 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中$_SERVER[PHP_SELF] 和 $_SERVER[SCRIPT_NAME]之间的区别
2009/09/05 PHP
JS 创建对象(常见的几种方法)
2008/11/03 Javascript
JQuery的ajax获取数据后的处理总结(html,xml,json)
2010/07/14 Javascript
基于jquery实现的一个选择中国大学的弹框 (数据、步骤、代码)
2012/07/26 Javascript
jquery插件lazyload.js延迟加载图片的使用方法
2014/02/19 Javascript
JS简单实现动画弹出层效果
2015/05/05 Javascript
浅谈Javascript的静态属性和原型属性
2015/05/07 Javascript
JQuery复制DOM节点的方法
2015/06/11 Javascript
JS Array创建及concat()split()slice()的使用方法
2016/06/03 Javascript
返回函数的JavaScript函数
2016/06/14 Javascript
深入理解jquery的$.extend()、$.fn和$.fn.extend()
2017/07/08 jQuery
详解如何在微信小程序中愉快地使用sass
2018/07/30 Javascript
JavaScript检查数据中是否存在相同的元素(两种方法)
2018/10/07 Javascript
Vue 实现手动刷新组件的方法
2019/02/19 Javascript
[01:07:46]完美世界DOTA2联赛循环赛 Magma vs IO BO2第二场 11.01
2020/11/02 DOTA
Hadoop中的Python框架的使用指南
2015/04/22 Python
Python中encode()方法的使用简介
2015/05/18 Python
Python解决抛小球问题 求小球下落经历的距离之和示例
2018/02/01 Python
python 用正则表达式筛选文本信息的实例
2018/06/05 Python
python跳过第一行快速读取文件内容的实例
2018/07/12 Python
Python常见的pandas用法demo示例
2019/03/16 Python
通过python实现弹窗广告拦截过程详解
2019/07/10 Python
使用Python爬虫库BeautifulSoup遍历文档树并对标签进行操作详解
2020/01/25 Python
python3.7调试的实例方法
2020/07/21 Python
Python 爬虫的原理
2020/07/30 Python
解决CSS3 transition-delay 属性默认值0不带单位失效的问题
2020/10/29 HTML / CSS
应届生财务会计求职信
2013/11/05 职场文书
更夫岗位责任制
2014/02/11 职场文书
给老师的一封建议书
2014/03/13 职场文书
四风问题民主生活会对照检查材料思想汇报
2014/09/27 职场文书
高校群众路线教育实践活动剖析材料
2014/10/10 职场文书
三好学生主要事迹材料
2015/11/03 职场文书
《少年闰土》教学反思
2016/02/18 职场文书
Django开发RESTful API实现增删改查(入门级)
2021/05/10 Python
SQL基础的查询语句
2021/11/11 MySQL
基于Python实现股票收益率分析
2022/04/02 Python