用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 查看内容

小程序顶部导航栏,可滑动,可动态选中放大效果

Rolan 2019-11-25 00:36

最近在研究小程序顶部导航栏时,学到了一个不错的导航栏,今天就来分享给大家。

老规矩,先看效果图

可以看到我们实现了如下功能

1,顶部导航栏 
2,可以左右滑动的导航栏 
3,选中条目放大 
原理其实很简单,我这里把我研究后的源码发给大家吧。

wxml文件如下

  1. <!-- 导航栏 -->
  2. <scroll-view scroll-x class="navbar" scroll-with-animation scroll-left="{{scrollLeft}}rpx">
  3. <view class="nav-item" wx:for="{{tabs}}" wx:key="id" bindtap="tabSelect" data-id="{{index}}">
  4. <view class="nav-text {{index==tabCur?'tab-on':''}}">{{item.name}}</view>
  5. </view>
  6. </scroll-view>

wxss文件如下

  1. /* 导航栏布局相关 */
  2. .navbar {
  3. width: 100%;
  4. height: 90rpx;
  5. /* 文本不换行 */
  6. white-space: nowrap;
  7. display: flex;
  8. box-sizing: border-box;
  9. border-bottom: 1rpx solid #eee;
  10. background: #fff;
  11. align-items: center;
  12. /* 固定在顶部 */
  13. position: fixed;
  14. left: 0rpx;
  15. top: 0rpx;
  16. }
  17. .nav-item {
  18. padding-left: 25rpx;
  19. padding-right: 25rpx;
  20. height: 100%;
  21. display: inline-block;
  22. /* 普通文字大小 */
  23. font-size: 28rpx;
  24. }
  25. .nav-text {
  26. width: 100%;
  27. height: 100%;
  28. display: flex;
  29. align-items: center;
  30. justify-content: center;
  31. letter-spacing: 4rpx;
  32. box-sizing: border-box;
  33. }
  34. .tab-on {
  35. color: #fbbd08;
  36. /* 选中放大 */
  37. font-size: 38rpx !important;
  38. font-weight: 600;
  39. border-bottom: 4rpx solid #fbbd08 !important;
  40. }

js文件如下

  1. // pages/test2/test2.js
  2. Page({
  3. data: {
  4. tabCur: 0, //默认选中
  5. tabs: [{
  6. name: '等待支付',
  7. id: 0
  8. },
  9. {
  10. name: '待发货',
  11. id: 1
  12. },
  13. {
  14. name: '待收货',
  15. id: 2
  16. },
  17. {
  18. name: '待签字',
  19. id: 3
  20. },
  21. {
  22. name: '待评价',
  23. id: 4
  24. },
  25. {
  26. name: '五星好评',
  27. id: 5
  28. },
  29. {
  30. name: '差评订单',
  31. id: 6
  32. },
  33. {
  34. name: '编程小石头',
  35. id: 8
  36. },
  37. {
  38. name: '小石头',
  39. id: 9
  40. }
  41. ]
  42. },
  43. //选择条目
  44. tabSelect(e) {
  45. this.setData({
  46. tabCur: e.currentTarget.dataset.id,
  47. scrollLeft: (e.currentTarget.dataset.id - 2) * 200
  48. })
  49. }
  50. })

代码里注释很明白了,大家自己跟着多敲几遍就可以了。后面会更新更多小程序相关的知识,请持续关注。

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: 编程小石头 来自: 简书