前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >小程序顶部导航栏,可滑动,可动态选中放大

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

作者头像
编程小石头
发布2020-10-11 17:19:57
1.7K0
发布2020-10-11 17:19:57
举报
文章被收录于专栏:小程序云开发入门

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

老规矩,先看效果图

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

  • 1,顶部导航栏
  • 2,可以左右滑动的导航栏
  • 3,选中条目放大

原理其实很简单,我这里把我研究后的源码发给大家吧。

wxml文件如下

代码语言:javascript
复制
<!-- 导航栏 -->
<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文件如下

代码语言:javascript
复制
/* 导航栏布局相关 */
.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文件如下

代码语言:javascript
复制
// 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
    })
  }
})

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

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-11-22,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 编程小石头 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 老规矩,先看效果图
  • wxml文件如下
  • wxss文件如下
  • js文件如下
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档