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


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 相关文章推荐
location.href语句与火狐不兼容的问题
Jul 04 Javascript
关于javascript DOM事件模型的两件事
Jul 22 Javascript
用javascript判断IE版本号简单实用且向后兼容
Sep 11 Javascript
如何实现修改密码时密码框显示保存到cookie的密码
Dec 10 Javascript
jquery动态添加option示例
Dec 30 Javascript
JS获取及验证开始结束日期的方法
Aug 20 Javascript
js前端面试题及答案整理(一)
Aug 26 Javascript
JavaScript递归操作实例浅析
Oct 31 Javascript
JavaScrpt判断一个数是否是质数的实例代码
Jun 11 Javascript
uni-app微信小程序登录并使用vuex存储登录状态的思路详解
Nov 04 Javascript
微信小程序实现登录注册功能
Dec 29 Javascript
JavaScript实现显示和隐藏图片
Apr 29 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 fckeditor 调用的函数
2009/06/21 PHP
解析PHP中的file_get_contents获取远程页面乱码的问题
2013/06/25 PHP
php+mysql删除指定编号员工信息的方法
2015/01/14 PHP
php微信公众平台交互与接口详解
2016/11/28 PHP
php实现小程序支付完整版
2018/10/09 PHP
4种Windows系统下Laravel框架的开发环境安装及部署方法详解
2020/04/06 PHP
TopList标签和JavaScript结合两例
2007/08/12 Javascript
javascript使用eval或者new Function进行语法检查
2010/10/16 Javascript
JavaScript代码复用模式实例分析
2012/12/02 Javascript
jQuery获取浏览器中的分辨率实现代码
2013/04/23 Javascript
jquery二级导航内容均分的原理及实现
2013/08/13 Javascript
js对图片base64编码字符串进行解码并输出图像示例
2014/03/17 Javascript
JS实现模拟风力的雪花飘落效果
2015/05/13 Javascript
浅谈JavaScript中指针和地址
2015/07/26 Javascript
js实现tab切换效果实例
2015/09/16 Javascript
JavaScript 闭包详细介绍
2016/09/28 Javascript
深入理解vue Render函数
2017/07/19 Javascript
一个基于react的图片裁剪组件示例
2018/04/18 Javascript
javascript中的数据类型检测方法详解
2019/08/07 Javascript
在 Vue 中编写 SVG 图标组件的方法
2020/02/24 Javascript
Vue 禁用浏览器的前进后退操作
2020/09/04 Javascript
antd design table更改某行数据的样式操作
2020/10/31 Javascript
[01:33:25]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第一场 1月24日
2021/03/11 DOTA
Python中super关键字用法实例分析
2015/05/28 Python
在Linux系统上通过uWSGI配置Nginx+Python环境的教程
2015/12/25 Python
Pycharm编辑器技巧之自动导入模块详解
2017/07/18 Python
Python使用回溯法子集树模板解决迷宫问题示例
2017/09/01 Python
python匹配两个短语之间的字符实例
2018/12/25 Python
python能在浏览器能运行吗
2020/06/17 Python
UNIX操作系统结构由哪几部分组成
2016/02/17 面试题
电气工程师岗位职责
2014/01/01 职场文书
绿色环保演讲稿
2014/05/10 职场文书
春节联欢会策划方案
2014/05/16 职场文书
档案工作个人总结
2015/03/03 职场文书
会计求职简历自我评价
2015/03/10 职场文书
单身证明格式样本
2015/06/15 职场文书