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


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 相关文章推荐
一直复略了的一个问题,关于表单重复提交
Feb 15 Javascript
JavaScript 32位整型无符号操作示例
Dec 08 Javascript
JavaScript判断访问的来源是手机还是电脑,用的哪种浏览器
Dec 12 Javascript
jsp网页搜索结果中实现选中一行使其高亮
Feb 17 Javascript
微信小程序 教程之WXML
Oct 18 Javascript
JavaScript表单验证的两种实现方法
Feb 11 Javascript
js实现动态显示时间效果
Mar 06 Javascript
详解React Native顶|底部导航使用小技巧
Sep 14 Javascript
VUE2.0+Element-UI+Echarts封装的组件实例
Mar 02 Javascript
基于游标的分页接口实现代码示例
Nov 12 Javascript
vue实现select下拉显示隐藏功能
Sep 30 Javascript
Electron整合React使用搭建开发环境的步骤详解
Jun 07 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
使用eAccelerator加密PHP程序
2008/10/03 PHP
使用php来实现网络服务
2009/09/15 PHP
PHP数组内存耗用太多问题的解决方法
2010/04/05 PHP
php中用加号与用array_merge合并数组的区别深入分析
2013/06/03 PHP
如何利用php array_multisort函数 对数据库结果进行复杂排序
2013/06/08 PHP
thinkphp中memcache的用法实例
2014/11/29 PHP
PHP 5.6.11 访问SQL Server2008R2的几种情况详解
2016/08/08 PHP
php7安装mongoDB扩展的方法分析
2017/08/02 PHP
php使用yield对性能提升的测试实例分析
2019/09/19 PHP
让iframe框架网页在任何浏览器下自动伸缩
2006/08/18 Javascript
jQuery 操作XML入门
2008/12/25 Javascript
避免 showModalDialog 弹出新窗体的原因分析
2010/05/31 Javascript
ASP.NET jQuery 实例9  通过控件hyperlink实现返回顶部效果
2012/02/03 Javascript
jQuery Ajax异步处理Json数据详解
2013/11/05 Javascript
jQuery实现回车键(Enter)切换文本框焦点的代码实例
2014/05/05 Javascript
使用insertAfter()方法在现有元素后添加一个新元素
2014/05/28 Javascript
JS逆序遍历实现代码
2014/12/02 Javascript
Angular 根据 service 的状态更新 directive
2016/04/03 Javascript
AngularJS 过滤与排序详解及实例代码
2016/09/14 Javascript
使用 vue.js 构建大型单页应用
2018/02/10 Javascript
Vuex 快速入门(简单易懂)
2018/09/20 Javascript
ES6 Symbol数据类型的应用实例分析
2019/06/26 Javascript
Auto.JS实现抖音刷宝等刷视频app,自动点赞,自动滑屏,自动切换视频功能
2020/05/08 Javascript
jQuery实现简单评论功能
2020/08/19 jQuery
Django Admin实现三级联动的示例代码(省市区)
2018/06/22 Python
对python pandas 画移动平均线的方法详解
2018/11/28 Python
Python设计模式之观察者模式原理与用法详解
2019/01/16 Python
Python实战购物车项目的实现参考
2019/02/20 Python
python3.x+pyqt5实现主窗口状态栏里(嵌入)显示进度条功能
2019/07/04 Python
Tkinter中复选菜单是否被选中的判断与设置方式
2020/03/04 Python
Nginx+Uwsgi+Django 项目部署到服务器的思路详解
2020/05/08 Python
python tkinter实现连连看游戏
2020/11/16 Python
意大利婴儿产品网上商店:Mukako
2018/10/14 全球购物
大学生党员自我批评
2014/02/14 职场文书
导游词范文之颐和园/重庆/云台山
2019/09/10 职场文书