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


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 相关文章推荐
javascript 继承实现方法
Aug 26 Javascript
jquery animate图片模向滑动示例代码
Jan 26 Javascript
jquery each()源代码
Feb 14 Javascript
JavaScript控制Session操作方法
Jan 17 Javascript
jquery ready(fn)事件使用介绍
Aug 21 Javascript
Jquery判断radio、selelct、checkbox是否选中及获取选中值方法总结
Apr 15 Javascript
JavaScript中继承用法实例分析
May 16 Javascript
jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法
Aug 10 Javascript
快速使用Bootstrap搭建传送带
May 06 Javascript
js 去掉字符串前后空格实现代码集合
Mar 25 Javascript
实现一个完整的Node.js RESTful API的示例
Sep 29 Javascript
实例分析js事件循环机制
Dec 13 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人民币金额数字转中文大写的函数代码
2013/02/27 PHP
php操作XML、读取数据和写入数据的实现代码
2014/08/15 PHP
PHP版QQ互联OAuth示例代码分享
2015/07/05 PHP
PHP rsa加密解密算法原理解析
2020/12/09 PHP
图片img的src不变让浏览器重新加载实现方法
2013/03/29 Javascript
jquery动态改变form属性提交表单
2014/06/03 Javascript
javascript中2个感叹号的用法实例详解
2014/09/04 Javascript
js正则表达式匹配数字字母下划线等
2015/04/14 Javascript
详解JavaScript中void语句的使用
2015/06/04 Javascript
JS点击某个图标或按钮弹出文件选择框的实现代码
2016/09/27 Javascript
angular源码学习第一篇 setupModuleLoader方法
2016/10/20 Javascript
用jQuery.ajaxSetup实现对请求和响应数据的过滤
2016/12/20 Javascript
JS遍历对象属性的方法示例
2017/01/10 Javascript
bootstrap datetimepicker控件位置异常的解决方法
2017/11/23 Javascript
微信小程序block的使用教程
2018/04/01 Javascript
详解小程序设置缓存并且不覆盖原有数据
2019/04/15 Javascript
python中利用await关键字如何等待Future对象完成详解
2017/09/07 Python
Python探索之实现一个简单的HTTP服务器
2017/10/28 Python
Python-OpenCV基本操作方法详解
2018/04/02 Python
Python3.6简单反射操作示例
2018/06/14 Python
对python指数、幂数拟合curve_fit详解
2018/12/29 Python
详解python数据结构和算法
2019/04/18 Python
Python3如何对urllib和urllib2进行重构
2019/11/25 Python
python函数定义和调用过程详解
2020/02/09 Python
Python对称的二叉树多种思路实现方法
2020/02/28 Python
Python 从attribute到property详解
2020/03/05 Python
Smilodox官方运动服装店:从运动服到健身配件
2020/08/27 全球购物
应用服务器有那些
2012/01/19 面试题
西安夏日科技有限公司Java笔试题
2013/01/11 面试题
应届大学生求职信
2013/12/01 职场文书
医校毕业生自我鉴定
2014/01/25 职场文书
授权委托书样本
2014/04/03 职场文书
产品质量保证书
2014/04/29 职场文书
个人买房协议书范本
2014/10/06 职场文书
毕业设计工作总结
2015/08/14 职场文书
为什么不建议在go项目中使用init()
2021/04/12 Golang