微信小程序顶部导航栏可滑动并选中放大


Posted in Javascript onDecember 05, 2019

这篇文章主要介绍了微信小程序顶部导航栏可滑动并选中放大,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

老规矩,先看效果图

微信小程序顶部导航栏可滑动并选中放大

可以看到我们实现了如下功能

  • 1,顶部导航栏
  • 2,可以左右滑动的导航栏
  • 3,选中条目放大

原理其实很简单,我这里把我研究后的源码发给大家吧。

wxml文件如下

<!-- 导航栏 -->
<scroll-view scroll-x class="navbar" scroll-with-animation scroll-left="{{scrollLeft}}rpx">
 <view class="nav-item" wx:for="{{tabs}}" wx:key="id" bindtap="tabSelect" data-id="{{index}}">
  <view class="nav-text {{index==tabCur?'tab-on':''}}">{{item.name}}</view>
 </view>
</scroll-view>

wxss文件如下

/* 导航栏布局相关 */
.navbar {
 width: 100%;
  height: 90rpx;
 /* 文本不换行 */
 white-space: nowrap;
 display: flex;
 box-sizing: border-box;
 border-bottom: 1rpx solid #eee;
 background: #fff;
 align-items: center;
 /* 固定在顶部 */
 position: fixed;
 left: 0rpx;
 top: 0rpx;
}

.nav-item {
 padding-left: 25rpx;
 padding-right: 25rpx;
 height: 100%;
 display: inline-block;
 /* 普通文字大小 */
 font-size: 28rpx;
}

.nav-text {
 width: 100%;
 height: 100%;
 display: flex;
 align-items: center;
 justify-content: center;
 letter-spacing: 4rpx;
 box-sizing: border-box;
}

.tab-on {
 color: #fbbd08;
 /* 选中放大 */
 font-size: 38rpx !important;
 font-weight: 600;
 border-bottom: 4rpx solid #fbbd08 !important;
}

js文件如下

// pages/test2/test2.js
Page({
 data: {
  tabCur: 0, //默认选中
  tabs: [{
    name: '等待支付',
    id: 0
   },
   {
    name: '待发货',
    id: 1
   },
   {
    name: '待收货',
    id: 2
   },
   {
    name: '待签字',
    id: 3
   },
   {
    name: '待评价',
    id: 4
   },
   {
    name: '五星好评',
    id: 5
   },
   {
    name: '差评订单',
    id: 6
   },
   {
    name: '编程小石头',
    id: 8
   },
   {
    name: '小石头',
    id: 9
   }
  ]

 },

 //选择条目
 tabSelect(e) {
  this.setData({
   tabCur: e.currentTarget.dataset.id,
   scrollLeft: (e.currentTarget.dataset.id - 2) * 200
  })
 }
})

代码里注释很明白了,大家自己跟着多敲几遍就可以了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS无限极树形菜单,json格式、数组格式通用示例
Jul 30 Javascript
Javascript倒计时页面跳转实例小结
Sep 11 Javascript
JavaScript中Function详解
Feb 27 Javascript
jQuery实现的鼠标滑过弹出放大图片特效
Jan 08 Javascript
BootStrap入门教程(一)之可视化布局
Sep 19 Javascript
Bootstrap基本组件学习笔记之input输入框组(9)
Dec 07 Javascript
angular2系列之路由转场动画的示例代码
Nov 09 Javascript
js实现控制文件拖拽并获取拖拽内容功能
Feb 17 Javascript
详解vue填坑之解决部分浏览器不支持pushState方法
Jul 12 Javascript
实例详解带参数的 npm script
May 28 Javascript
用webpack4开发小程序的实现方法
Jun 04 Javascript
vue(2.x,3.0)配置跨域代理
Nov 27 Javascript
微信小程序实现点击按钮后修改颜色
Dec 05 #Javascript
React 父子组件通信的实现方法
Dec 05 #Javascript
Javascript中的this,bind和that使用实例
Dec 05 #Javascript
原生JS与CSS实现软件卸载对话框功能
Dec 05 #Javascript
Vue快速实现通用表单验证功能
Dec 05 #Javascript
Vue组件通信中非父子组件传值知识点总结
Dec 05 #Javascript
基于javascript实现贪吃蛇经典小游戏
Apr 10 #Javascript
You might like
Ext.data.PagingMemoryProxy分页一次性读取数据的实现代码
2010/04/07 PHP
php学习之function的用法
2012/07/14 PHP
php shell超强免杀、减少体积工具实现代码
2012/10/16 PHP
php中导出数据到excel时数字变为科学计数的解决方法
2013/02/03 PHP
简单的php文件上传(实例)
2013/10/27 PHP
PHP函数extension_loaded()用法实例
2015/01/19 PHP
php获取今日开始时间和结束时间的方法
2017/02/27 PHP
javascript div 弹出可拖动窗口
2009/02/26 Javascript
js调用activeX获取u盘序列号的代码
2011/11/21 Javascript
js分页代码分享
2014/04/28 Javascript
JS中实现简单Formatter函数示例代码
2014/08/19 Javascript
javascript转换日期字符串为Date日期对象的方法
2015/02/13 Javascript
jQuery实现图片轮播效果代码(基于jquery.pack.js插件)
2016/06/02 Javascript
Node.js实现文件上传
2016/07/05 Javascript
JavaScript中数据类型转换总结
2016/12/25 Javascript
ECMAscript 变量作用域总结概括
2017/08/18 Javascript
JS实现为动态创建的元素添加事件操作示例
2018/03/17 Javascript
一个基于react的图片裁剪组件示例
2018/04/18 Javascript
vue中的watch监听数据变化及watch中各属性的详解
2018/09/11 Javascript
javascript数组的定义及操作实例
2019/11/10 Javascript
基于element-ui对话框el-dialog初始化的校验问题解决
2020/09/11 Javascript
详解Python编程中包的概念与管理
2015/10/16 Python
Python之os操作方法(详解)
2017/06/15 Python
python实现NB-IoT模块远程控制
2018/06/20 Python
Sanic框架配置操作分析
2018/07/17 Python
使用Python3内置文档高效学习以及官方中文文档
2019/05/19 Python
python3爬虫中异步协程的用法
2020/07/10 Python
基于python爬取梨视频实现过程解析
2020/11/09 Python
HTML5之WebGL 3D概述(上)—WebGL原生开发开启网页3D渲染新时代
2013/01/31 HTML / CSS
html5 canvas 实现光线沿不规则路径运动
2020/04/20 HTML / CSS
新入职员工的自我介绍演讲稿
2014/01/02 职场文书
国家助学金感谢信
2015/01/21 职场文书
拉贝日记观后感
2015/06/05 职场文书
用React Native制作一个简单的游戏引擎
2021/05/27 Javascript
分享Python异步爬取知乎热榜
2022/04/12 Python
Windows Server 2019 配置远程控制以及管理方法
2022/04/28 Servers