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

2024-11-27 05:55:39

这篇文章主要介绍了微信小程序顶部导航栏可滑动并选中放大,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

老规矩，先看效果图

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

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
  })
 }
})

代码里注释很明白了，大家自己跟着多敲几遍就可以了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

详解微信小程序胶囊按钮返回|首页自定义导航栏功能

项目代码:https://github.com/Shay0921/header-navbar.git 在小程序中,从转发出来的小程序消息卡片进入,因为页面栈中只有一个,所以不会出现返回按钮,对于一些电商平台来说,当商品被转发后会很影响客户查看其它产品和首页,这时候就需要使用自定义导航栏自己写一个"胶囊按钮".如下图所示: 从别的页面点到商品页时会有返回和首页按钮: 当从分享页进入到商品页时,因为页面栈只有一个,所以只有首页按钮: 首先我们需要如何开启自定义导航栏,查看手册后会发现一个页
微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)

本文实例讲述了微信小程序MUI导航栏透明渐变功能.分享给大家供大家参考,具体如下: 导航栏透明渐变效果实现原理 1. 利用position:absolute在导航下定位一个view作为背景渐变使用; 2. 通过改变改view的opacity来实现透明渐变. WXML  <view style="height:100%;position:fixed;width:100%;"> <scroll-v
微信小程序实现的动态设置导航栏标题功能示例

本文实例讲述了微信小程序实现的动态设置导航栏标题功能.分享给大家供大家参考,具体如下: 场景当从一个分类列表页面进入到一个详情页面的时候,由于这个详情页面是公用的,为了区分页面,就会设置该页面的导航用以区分.就需要开发者在页面加载的时候进行动态设置导航标题! 实现API wx.setNavigationBarTitle(OBJECT) 语法 wx.setNavigationBarTitle({ title: '当前页面', //页面标题 success: () => {}, //接口调用成功的
微信小程序顶部导航栏滑动tab效果

小程序商品展示需要导航栏的商品分类进行滑动,供大家参考,具体内容如下效果图: 首先是滑动的效果: <scroll-view scroll-x="true" style="width: 100%;white-space:nowrap;"> </scroll-view> 小程序使用</scroll-view>,横向移动即可 WXML:这里面我将导航栏显示类目定义为5个,每个20%,当超出5个分类,也就是index>4的时候,导
微信小程序tab切换可滑动切换导航栏跟随滚动实现代码

简介看到今日头条小程序页面可以滑动切换,而且tab导航条也会跟着滚动,点击tab导航,页面滑动,切导航栏也会跟着滚动,就想着要怎么实现这个功能像商城类商品类目如果做成左右滑动切换类目用户体验应该会好很多,我这里只是一个小demo,没有怎么去考虑数据的问题,主要是想着去实现这么个功能,有可能后期引入数据后会出现问题,欢迎提出互相讨论解决过程 1.在想要实现这个问题的时候找了不少别人的博客看,主体页面布局方面是比较统一的,tab导航栏使用<scroll-view>标签,内容使用<swi
小程序实现自定义导航栏适配完美版

1.发现问题小程序页面自定义导航栏功能已经开放有些日子了(还不知道这个功能的可以先>>了解一下),这极大的提升了小程序开发的自由度,相信不少小伙伴已经使用过这个功能,同时也相信不少小伙伴在此功能开发过程中踩过同样的一些坑: 机型多如牛毛:自定义导航栏高度在不同机型始终无法达到视觉上的统一: 调皮的胶囊按钮:导航栏元素(文字,图标等)怎么也对不齐那该死的胶囊按钮: 各种尺寸的全面屏,奇怪的刘海屏,简直要抓狂. 同样的,这些问题也是小灰经历过的.但是小灰相信,办法总比问题多,于是开始了自己的探究
微信小程序实现左侧滑动导航栏

本文实例为大家分享了微信小程序实现左侧滑动导航栏的具体代码,供大家参考,具体内容如下左侧滑动导航栏如图 wxml  <view class='under_line'></view> <view style='float: left' class='left'> <scroll-view scroll-y scroll-with-animation scroll-left="{{scrollLength}}&quo
微信小程序仿今日头条导航栏滚动解析

项目需要,做一个和今日头条一样的导航栏,可以横行滚动,幸好再weui里面看到了类似的例子地址:https://weui.shanliwawa.top/demo/js4.html,使用iscroll-lite.j实现,weui自己封装了一层,vue中实现代码: <div id="tab-tip" class="container"> <div id="tagnav" class="weui-navigator weui
微信小程序顶部导航栏可滑动并选中放大

这篇文章主要介绍了微信小程序顶部导航栏可滑动并选中放大,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下老规矩,先看效果图可以看到我们实现了如下功能 1,顶部导航栏 2,可以左右滑动的导航栏 3,选中条目放大原理其实很简单,我这里把我研究后的源码发给大家吧. wxml文件如下  <scroll-view scroll-x class="navbar" scroll-with-animatio
微信小程序实现导航栏和内容上下联动功能代码

今日给大家分享一下如何实现导航栏(nav)和内容部分上下联动(相关代码模块我已单独整理放到github上面了,欢迎前来start). github地址:https://github.com/sunshime/weChatSkill 一.效果图: 二.实现过程: 主要是使用 scroll-view 实现导航栏部分,用 swiper 实现下面的内容部分,通过 swiper 的 current 属性和导航栏的 index 相互对应来实现导航栏部分切换时内容部分跟随切换:通过 swiper 的
uniapp微信小程序自定义导航栏的全过程

目录前言那么标题栏的高度我们怎么获取呢? 献上源码: 组件使用: 效果图: 总结前言相信很多小伙伴在使用uniapp进行多端开发的时候呢,在面对一些奇葩的业务需求的时候,uniapp给我们提供的默认导航栏已经不能满足我们的业务需求了,这个时候就需要我们自己自定义导航栏使用啦. 当然uniapp也给我们提供了很多的自定义导航栏的插件供大家使用,今天也给大家分享一个我自己写的导航栏啦,希望大家多多指点首先我们在自定义导航栏的时候,我们需要知道头部的导航栏有哪几部分组成,那么我们以微信小程序
微信小程序自定义导航栏效果

本文实例为大家分享了微信小程序自定义导航栏的具体代码,供大家参考,具体内容如下第一步添加属性 “navigationStyle”: “custom” 全局: app.json中添加属性 “navigationStyle”: “custom” "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#f
微信小程序自定义导航栏

本文实例为大家分享了微信小程序自定义导航栏,供大家参考,具体内容如下在微信小程序中导航栏是可以直接配置的: 目前只支持二种,但是我们的需求可能需要一个其他的颜色等,那么不得不修改这个了, "window":{ "navigationStyle": "custom" }, 我就配置了这个属性,现在来看看我的界面红色箭头指向的是配置后自动生成的,我没有写任何代码,比如我在更多界面导航栏需要自定义,那么在more.js中在onLoad()方法中获取
微信小程序自定义导航栏（模板化）

前段时间写过一篇关于微信小程序自定义导航栏的自定义组件,但是对于分享页有一定的bug 这次用模板化又搞了一遍优化了下Android与IOS 显示更接近微信原生的导航栏,以及修复分享页面不显示返回首页按钮如果大家不习惯模板化的话可以针对自己的需求拿以前封装的组件化做一些修改微信小程序自定义导航栏(组件化) CustomNavBar.wxml <template name="CustomNavBar"> <block wx:if="{{ showNavB
微信小程序MUI导航栏透明渐变功能示例(通过改变rgba的a值实现)

本文实例讲述了微信小程序MUI导航栏透明渐变功能.分享给大家供大家参考,具体如下: 导航栏透明渐变效果实现原理 1. 给page-group设置的背景颜色采用rgba; 2. 通过改变rgba其中a的值来实现透明渐变. WXML <view style="height:100%;position:fixed;width:100%;"> <scroll-view scroll-y="false" bindscroll="scroll&qu
微信小程序自定义导航栏实例代码

背景在做快狗打车小程序时,关于默认导航栏,我们遇到了以下的问题: Android.IOS手机对于页面title的展示不一致,安卓title的显示不居中页面的title只支持纯文本级别的样式控制,不能够做更丰富的title效果左上角的事件无法监听.定制路由导航单一,只能够返回上一页,深层级页面的返回不够友好我们希望的是:在各个机型页面上title一致性 & 个性化展示.取得左上角点击事件控制权及深层级页面的一键返回实现 step1 自定义第一步取得导航栏的控制权小程序支持自定义导

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

相关推荐

随机推荐