微信小程序中顶部导航栏的实现代码

2024-10-05 18:35:09

微信小程序中顶部导航栏的实现

实例代码：

<view class="swiper-tab">
  <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">11</view>
  <view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">22</view>
  <view class="swiper-tab-list {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">33</view>
  <view class="swiper-tab-list {{currentTab==3 ? 'on' : ''}}" data-current="3" bindtap="swichNav">44</view>
  <view class="swiper-tab-list {{currentTab==4 ? 'on' : ''}}" data-current="4" bindtap="swichNav">55</view>
</view>  

<swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight - 31}}px" bindchange="bindChange">
  <!-- 我是哈哈 -->
  <swiper-item>
   <view>我是哈哈</view>
  </swiper-item>
  <!-- 我是呵呵 -->
  <swiper-item>
   <view>我是呵呵</view>
  </swiper-item>
  <!-- 我是嘿嘿 -->
  <swiper-item>
   <view>我是嘿嘿</view>
  </swiper-item>
  <swiper-item>
   <view>我是嘿嘿</view>
  </swiper-item>
  <swiper-item>
   <view>我是嘿嘿</view>
  </swiper-item>
</swiper>

.swiper-tab{
  width: 100%;
  border-bottom: 2rpx solid #777777;
  text-align: center;
  line-height: 80rpx;
  }
.swiper-tab-list{ font-size: 30rpx;
  display: inline-block;
  width: 20%;
  color: #777777;
}
.on{ color: #da7c0c;
  border-bottom: 5rpx solid #da7c0c;}
.swiper-box{ display: block; height: 100%; width: 100%; overflow: hidden; }
.swiper-box view{
  text-align: center;
}

var app = getApp()
Page( {
 data: {
  /**
    * 页面配置
    */
  winWidth: 0,
  winHeight: 0,
  // tab切换
  currentTab: 0,
 },
 onLoad: function() {
  var that = this;  

  /**
   * 获取系统信息
   */
  wx.getSystemInfo( {  

   success: function( res ) {
    that.setData( {
     winWidth: res.windowWidth,
     winHeight: res.windowHeight
    });
   }  

  });
 },
 /**
   * 滑动切换tab
   */
 bindChange: function( e ) {  

  var that = this;
  that.setData( { currentTab: e.detail.current });  

 },
 /**
  * 点击tab切换
  */
 swichNav: function( e ) {  

  var that = this;  

  if( this.data.currentTab === e.target.dataset.current ) {
   return false;
  } else {
   that.setData( {
    currentTab: e.target.dataset.current
   })
  }
 },
 /**
 * 点击分享
 */
 onShareAppMessage: function () {
  return {
   title: '装逼小程序',
   path: '/page/user?id=123'
  }
 }
})

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

微信小程序底部导航栏目开发资料

微信小程序底部导航栏目开发我们先来看个效果图这里,我们添加了三个导航图标,因为我们有三个页面,微信小程序最多能加5个. 那他们是怎么出现怎么着色的呢?两步就搞定! 1. 图标准备阿里图标库 http://www.iconfont.cn/collections/show/29 我们进入该网站,鼠标滑到一个喜欢的图标上面点击下方的下载按钮在弹出框中选择了俩个不同颜色的图标选择64px大小即可,我选择的是png 然后下载下来起上别名将上述起好名字的图标保存到小程序
微信小程序教程系列之设置标题栏和导航栏（7）

微信小程序标题栏和导航栏的设置方法,具体内容如下设置标题栏标题栏window 在app.json文件里面,通过window对象里面的属性进行设置示例: app.json: 运行: 设置导航栏导航栏TabBar 如果我们的小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),那么我们可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面. Tip: 通过页面跳转(wx.navigateTo)或者页面重定向(wx.redirect
微信小程序自定义导航隐藏和显示功能

微信小程序中不能直接操作window对象,document文档,跟html的树结构不相同. 实现类似导航的隐藏显示,如图效果: 点击网络显示或隐藏网络中包含的内容.其他类似. 如果是jquery很方便实现,能直接操作document.在微信小程序中实现思路是:在逻辑层定义变量,通过setData赋值. 方法一:通过变量直接赋值,给每一个要控制显示的view定义变量 .wxml 代码:  <view class="navView" bi
详解微信小程序设置底部导航栏目方法

详解微信小程序设置底部导航栏目方法小程序底部想要有一个漂亮的导航栏目,不知道怎么制作,于是百度找到了本篇文章,分享给大家. 好了小程序的头部标题设置好了,我们来说说底部导航栏是如何实现的. 我们先来看个效果图这里,我们添加了三个导航图标,因为我们有三个页面,小程序最多能加5个. 那他们是怎么出现怎么着色的呢?两步就搞定! 1. 图标准备阿里图标库 http://www.iconfont.cn/collections/show/29 我们进入该网站,鼠标滑到一个喜欢的图标上面点击下
微信小程序 wxapp导航 navigator详解

微信小程序 wxapp导航 navigator 最近微信小程序非常火,朋友圈,微博,论坛等地方都在刷屏,因为这是搞前端的春天,前端工程师可以赚一把了,所以业余就学习了微信小程序的知识,这里记录下 : navigator 属性名类型默认值说明 url String 应用内的跳转链接 redirect Boolean false 是否关闭当前页面 hover-class String navigator-hover 指定点击时的样式类,当hover-class="none"时,没
微信小程序（三）tabBar底部导航详细介绍

tabBar相对而言用的还是比较多的,但是用起来并没有难,在app.json中配置下tabBar即可,注意tabBar至少需要两个最多五个Item选项主要属性: 对于tabBar整体属性设置: 对于tabBar中每个Item属性设置: 下面是官网一张图对tabBar描述: app.json的配置相对就简单了: 相关文章: hello WeApp icon组件 Window text组件
微信小程序开发之顶部导航栏实例代码

微信小程序开发之顶部导航栏需求:顶部导航栏效果图: wxml:  <view class="navbar"> <text wx:for="{{navbar}}" data-idx="{{index}}" class="item {{currentTab==index ? 'active' : ''}}" wx:key="unique" bindtap=
微信小程序配置顶部导航条标题颜色的实现方法

微信小程序配置顶部导航条标题颜色的实现方法关于小程序导航顶部配置都写在.json文件中. { "window":{ "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black", "navigationBarTitleText": "微信接口功能演示", "bac
微信小程序中顶部导航栏的实现代码

微信小程序中顶部导航栏的实现实例代码: <view class="swiper-tab"> <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">11</view> <view class="swiper-tab-list {{curre
uniapp开发微信小程序自定义顶部导航栏功能实例

目录自定义导航栏渐变色,先上效果重点来了,导航栏设置渐变色补充:更换图标总结自定义导航栏渐变色,先上效果使用uniapp开发小程序,在不同界面,要去对页面进行修改顶部导航栏. 比如说要去定义导航栏的背景颜色,常规的去定义导航栏背景颜色全局定义导航栏 "window": { "navigationBarBackgroundColor": "#32A2FD", // 顶部背景颜色 "navigationBarTitleText
微信小程序自定义头部导航栏（组件化）

本文实例为大家分享了微信小程序自定义头部导航栏的具体代码,供大家参考,具体内容如下效果图支持导航栏自定义背景颜色.背景图片支持返回文字自定义支持导航标题自定义首先在app.json window配置项添加 "window": { "navigationStyle": "custom" } 自定义头部导航栏代码 wxml部分 <view class="cu-custom" style="height:
微信小程序实现侧边导航栏

本文实例为大家分享了微信小程序实现侧边导航栏的具体代码,供大家参考,具体内容如下效果图 wxml <view class='productNav'>  <view class='left'> <view class="{{active==0?'selected':'normal'}}" id="0" bindtap='switchNav'>为您推荐</view>
微信小程序实现左侧导航栏

本文实例为大家分享了微信小程序实现左侧导航栏的具体代码,供大家参考,具体内容如下 wxml <view class="content"> <view class='left'> <view class="{{flag==0?'select':'normal'}}" id='0' bindtap='switchNav'>8:00-9:00</view> <view cla
微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题

这两天因为要做一个带背景的小程序头,哭了,小程序导航栏有背景也就算了,还得让导航栏上的背景顺下来,心态小崩.现在可以单独设置一个页面的小程序头了,但是前提是要微信7.0以上的版本,考虑到兼容性问题,还是不要贸然的上了,所以用老版本的替换所有页面的小程序头来做. 参考了其他篇的文章,但是没有解决自定义背景的和返回按钮的颜色的问题,还有因为IOS的橡皮筋效果,对IOS端不太友好,屏幕会乱划.所以针对性的改动了这些功能,因为才学小程序两三天,所以其中踩了很多坑,但好在最后效果还是达到了. 下面是效
Taro小程序自定义顶部导航栏功能的实现

微信自带的顶部导航栏是无法支持自定义icon和增加元素的,在开发小程序的时候自带的根本满足不了需求,分享一个封装好的组件,支持自定义icon.扩展dom,适配安卓.ios.h5,全面屏. 我用的是京东的Taro多端编译框架写的小程序,原生的也可以适用,用到的微信/taro的api做调整就行,实现效果如下. 1.NavBar.js import Taro from '@tarojs/taro'; import React, { Component } from 'react' import { V
微信小程序自定义顶部导航组件

本文实例为大家分享了微信小程序自定义顶部导航组件,供大家参考,具体内容如下在components中新建文件夹navbar components/navbar.wxml  <view class="navbar" style="height:{{navHeight+5}}px;background-image:url('{{imgUrl}}') "> <!-- 左上角返回按
微信小程序实现顶部导航特效

本文实例为大家分享了微信小程序实现顶部导航的具体代码,供大家参考,具体内容如下之前Android开发时,顶部导航用到viewPage,微信小程序里想要达到同样的效果,可用swiper来实现,先看效果图上代码: 1.swiperTab.js Page({ data: { // tab切换 currentTab: 0, }, swichNav: function (e) { console.log(e); var that = this; if (this.data.currentTab ===

微信小程序中顶部导航栏的实现代码

相关推荐

随机推荐