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


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 相关文章推荐
jQuery使用animate创建动画用法实例
Aug 07 Javascript
javascript实现在网页中运行本地程序的方法
Feb 03 Javascript
JavaScript实现图片滑动切换的代码示例分享
Mar 06 Javascript
深入解析JavaScript中的arguments对象
Jun 12 Javascript
JS传递对象数组为参数给后端,后端获取的实例代码
Jun 28 Javascript
基于Vuejs实现购物车功能
Aug 02 Javascript
将JSON字符串转换成Map对象的方法
Nov 30 Javascript
Angular1.x复杂指令实例详解
Mar 01 Javascript
Vue脚手架的简单使用实例
Jul 10 Javascript
Vue隐藏显示、只读实例代码
Jul 18 Javascript
layer.confirm取消按钮绑定事件的方法
Aug 17 Javascript
Vue实现导航栏的显示开关控制
Nov 01 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
php Memcache 中实现消息队列
2009/11/24 PHP
windows下升级PHP到5.3.3的过程及注意事项
2010/10/12 PHP
PHP中SESSION使用中的一点经验总结
2012/03/30 PHP
PHP中创建和验证哈希的简单方法实探
2015/07/06 PHP
Laravel等框架模型关联的可用性浅析
2019/12/15 PHP
JavaScript 检测浏览器和操作系统的脚本
2008/12/26 Javascript
基于jquery的跨域调用文件
2010/11/19 Javascript
通过jQuery源码学习javascript(一)
2012/12/27 Javascript
document节点对象的获取方式示例介绍
2013/12/24 Javascript
jQuery地图map悬停显示省市代码分享
2015/08/20 Javascript
初识angular框架后的所思所想
2016/02/19 Javascript
vue.js内部自定义指令与全局自定义指令的实现详解(利用directive)
2017/07/11 Javascript
用react-redux实现react组件之间数据共享的方法
2018/06/08 Javascript
Vue-cli3项目配置Vue.config.js实战记录
2018/07/29 Javascript
Vue-Quill-Editor富文本编辑器的使用教程
2018/09/21 Javascript
JavaScript中的垃圾回收与内存泄漏示例详解
2019/05/02 Javascript
详解vue-router的Import异步加载模块问题的解决方案
2020/05/13 Javascript
uniapp 仿微信的右边下拉选择弹出框的实现代码
2020/07/12 Javascript
element-ui点击查看大图的方法示例
2020/12/14 Javascript
vue 动态添加的路由页面刷新时失效的原因及解决方案
2021/02/26 Vue.js
Django框架模板注入操作示例【变量传递到模板】
2018/12/19 Python
Python获取时间范围内日期列表和周列表的函数
2019/08/05 Python
解决Mac下使用python的坑
2019/08/13 Python
突袭HTML5之Javascript API扩展1—Web Worker异步执行及相关概述
2013/01/31 HTML / CSS
HTML5注册表单的自动聚焦与占位文本示例代码
2013/07/19 HTML / CSS
美国顶级奢侈茶:Mighty Leaf Tea(美泰茶)
2016/11/26 全球购物
Carrs Silver官网:英国著名的银器品牌
2020/08/29 全球购物
如何找出EMP表里面SALARY第N高的employee
2013/12/05 面试题
小学运动会演讲稿
2014/08/25 职场文书
领导班子民主生活会整改措施(工商局)
2014/09/21 职场文书
2015年数学教师工作总结
2015/05/20 职场文书
家长通知书家长意见
2015/06/03 职场文书
为自己工作观后感
2015/06/11 职场文书
篮球赛闭幕式主持词
2015/07/03 职场文书
2015中学教师个人工作总结
2015/07/22 职场文书
幼儿园小班班务总结
2015/08/03 职场文书