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


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 相关文章推荐
通过 Dom 方法提高 innerHTML 性能
Mar 26 Javascript
js数据验证集合、js email验证、js url验证、js长度验证、js数字验证等简单封装
May 15 Javascript
ExtJs设置GridPanel表格文本垂直居中示例
Jul 15 Javascript
JS过滤url参数特殊字符的实现方法
Dec 24 Javascript
JS+CSS3制作炫酷的弹窗效果
Nov 08 Javascript
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
Apr 10 jQuery
vue中用H5实现文件上传的方法实例代码
May 27 Javascript
vue2.0+vue-dplayer实现hls播放的示例
Mar 02 Javascript
vue.js添加一些触摸事件以及安装fastclick的实例
Aug 28 Javascript
详解vue使用vue-layer-mobile组件实现toast,loading效果
Aug 31 Javascript
Elementui表格组件+sortablejs实现行拖拽排序的示例代码
Aug 28 Javascript
JS前端轻量fabric.js系列物体基类
Aug 05 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 date与gmdate的获取日期的区别
2010/02/08 PHP
PHP数组内存耗用太多问题的解决方法
2010/04/05 PHP
sphinx增量索引的一个问题
2011/06/14 PHP
php中http_build_query 的一个问题
2012/03/25 PHP
WAF的正确bypass
2017/01/05 PHP
Laravel 中使用 Vue.js 实现基于 Ajax 的表单提交错误验证操作
2017/06/30 PHP
Javascript注入技巧
2007/06/22 Javascript
js CSS操作方法集合
2008/10/31 Javascript
jQuery对表单元素的取值和赋值操作代码
2011/05/19 Javascript
Javascript在IE和FireFox中的不同表现简析
2012/12/03 Javascript
js中AppendChild与insertBefore的用法详细解析
2013/12/16 Javascript
jquery实现pager控件示例
2014/04/09 Javascript
javascript 自定义回调函数示例代码
2014/09/26 Javascript
使用纯javascript实现经典扫雷游戏
2015/04/23 Javascript
jquery.cookie.js实现用户登录保存密码功能的方法
2016/04/15 Javascript
AngularJS使用ng-app自动加载bootstrap框架问题分析
2017/01/04 Javascript
详解Html a标签中href和onclick用法、区别、优先级别
2017/01/16 Javascript
JavaScript数据结构之二叉树的计数算法示例
2017/04/13 Javascript
vue2 v-model/v-text 中使用过滤器的方法示例
2019/05/09 Javascript
如何在wxml中直接写js代码(wxs)
2019/11/14 Javascript
浅析vue-router实现原理及两种模式
2020/02/11 Javascript
[41:13]完美世界DOTA2联赛PWL S2 Forest vs Rebirth 第一场 11.20
2020/11/20 DOTA
Python2包含中文报错的解决方法
2018/07/09 Python
Python实现的线性回归算法示例【附csv文件下载】
2018/12/29 Python
Python matplotlib画图与中文设置操作实例分析
2019/04/23 Python
python 判断linux进程,并杀死进程的实现方法
2019/07/01 Python
Python Process多进程实现过程
2019/10/22 Python
python创建学生成绩管理系统
2019/11/22 Python
Python实现图像去噪方式(中值去噪和均值去噪)
2019/12/18 Python
Django中使用Celery的方法步骤
2020/12/07 Python
介绍一下你对SOA的认识
2016/04/24 面试题
酒鬼酒广告词
2014/03/21 职场文书
水利专业大学生职业生涯规划书范文
2014/09/17 职场文书
埃及王子观后感
2015/06/16 职场文书
呼兰河传读书笔记
2015/06/30 职场文书
微信小程序APP的事件绑定以及传递参数时的冒泡和捕获
2022/04/19 Javascript