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


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 火狐(firefox)不显示本地图片问题解决
Jul 05 Javascript
为jQuery添加Webkit的触摸的方法分享
Feb 02 Javascript
jQuery 删除/替换DOM元素的几种方式
May 20 Javascript
再探JavaScript作用域
Sep 24 Javascript
JavaScript分析、压缩工具JavaScript Analyser
Dec 31 Javascript
js如何准确获取当前页面url网址信息
Sep 13 Javascript
jQuery EasyUI提交表单验证
Jul 19 Javascript
详解React-Native解决键盘遮挡问题(Keyboard遮挡问题)
Jul 13 Javascript
js定时器+简单的动画效果实例
Nov 10 Javascript
详解vue-router 命名路由和命名视图
Jun 01 Javascript
微信小程序中显示倒计时代码实例
May 09 Javascript
vue 调用 RESTful风格接口操作
Aug 11 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
星际争霸教主Flash的ID由来:你永远不会知道他之前的ID是www!
2019/01/18 星际争霸
2020显卡排行榜天梯图 显卡天梯图2020年3月最新版
2020/04/02 数码科技
PHP环境搭建最新方法
2006/09/05 PHP
Twig模板引擎用法入门教程
2016/01/20 PHP
Thinkphp自定义代码生成工具及用法说明(附下载地址)
2016/05/27 PHP
值得分享的php+ajax实时聊天室
2016/07/20 PHP
JS+PHP实现用户输入数字后显示最大的值及所在位置
2017/06/19 PHP
PHP实现上传图片到数据库并显示输出的方法
2018/05/31 PHP
JQuery文本框高亮显示插件代码
2011/04/02 Javascript
javascript的数据类型、字面量、变量介绍
2012/05/23 Javascript
js控制台输出的方法(详解)
2016/11/26 Javascript
BootStrap中的Fontawesome 图标
2017/05/25 Javascript
JS路由跳转的简单实现代码
2017/09/21 Javascript
基于匀速运动的实例讲解(侧边栏,淡入淡出)
2017/10/17 Javascript
Vue通过URL传参如何控制全局console.log的开关详解
2017/12/07 Javascript
深入剖析Node.js cluster模块
2018/05/23 Javascript
使用bootstrap实现下拉框搜索功能的实例讲解
2018/08/10 Javascript
如何将HTML字符转换为DOM节点并动态添加到文档中详解
2018/08/19 Javascript
解决vue更新路由router-view复用组件内容不刷新的问题
2019/11/04 Javascript
在项目vue中使用echarts的操作步骤
2020/09/07 Javascript
浅谈vue在html中出现{{}}的原因及解决方式
2020/11/16 Javascript
python tkinter实现彩球碰撞屏保
2019/07/30 Python
Python 3.6打包成EXE可执行程序的实现
2019/10/18 Python
详解基于Jupyter notebooks采用sklearn库实现多元回归方程编程
2020/03/25 Python
python属于软件吗
2020/06/18 Python
Python 带星号(* 或 **)的函数参数详解
2021/02/23 Python
Watchshop德国:欧洲在线手表No.1
2019/06/20 全球购物
俄罗斯电动工具和设备购物网站:Vseinstrumenti.ru
2020/11/12 全球购物
双立人美国官方商店:ZWILLING集团餐具和炊具
2020/05/07 全球购物
幼儿生日活动方案
2014/08/27 职场文书
普通党员群众路线教育实践活动心得体会
2014/11/04 职场文书
六一儿童节主持开场白
2015/05/28 职场文书
《岳阳楼记》原文、译文赏析
2019/09/10 职场文书
python中requests库+xpath+lxml简单使用
2021/04/29 Python
详解Python requests模块
2021/06/21 Python
springBoot基于webSocket实现扫码登录
2021/06/22 Java/Android