微信小程序实现滴滴导航tab切换效果

2024-12-01 07:55:55

本文实例为大家分享了微信小程序实现tab切换效果的具体代码，供大家参考，具体内容如下

效果图如下： (请自动忽视底部tab.....)

简单介绍一下：顶部导航使用 scroll-view 组件中间的内容部分使用 swiper 组件

实现的逻辑就是：先这样在这样，这样然后那样。（此处省略200个字）。

代码如下，复制可用

wxml

 <view class="contain">
 <!-- 导航栏 -->
 <scroll-view class="tab" scroll-x scroll-left="{{tabScroll}}" scroll-with-animation="true">
 <block wx:for="{{menuList}}" wx:key="index">
  <view class="tab-item {{currentTab == index ? 'active' : ''}}" data-current="{{index}}" bindtap='clickMenu'>{{item.name}}</view>
 </block>
 </scroll-view>
 <!-- 页面 -->
 <swiper class="content" style='height: {{height}}px' duration="1000" current="{{currentTab}}" bindchange="changeContent">
 <swiper-item class="content-item" wx:for="{{menuList}}" wx:key="index">这里是{{item.name}}</swiper-item>
 </swiper>
</view>

Page({
 data: {
 menuList: [{
  name: "快车"
 }, {
  name: "顺风车"
 }, {
  name: "外卖"
 }, {
  name: "单车"
 }, {
  name: "礼橙专车"
 }, {
  name: "出租车"
 }, {
  name: "公交"
 }, {
  name: "代驾"
 }, {
  name: "豪华车"
 }, {
  name: "自驾租车"
 }, {
  name: "拼车"
 }, {
  name: "二手车"
 }],
 tabScroll: 0,
 currentTab: 0,
 windowHeight: '',
 windowWidth: ''
 },
 onLoad: function() {
 wx.getSystemInfo({  // 获取当前设备的宽高，文档有
  success: (res) => {
  this.setData({
   windowHeight: res.windowHeight,
   windowWidth: res.windowWidth
  })
  },
 })
 },
 onReady: function() {
 wx.setNavigationBarTitle({ //修改标题文字
  title: ''
 })
 },
 clickMenu: function(e) {
 var current = e.currentTarget.dataset.current //获取当前tab的index
 var tabWidth = this.data.windowWidth / 5 // 导航tab共5个，获取一个的宽度
 this.setData({
  tabScroll: (current - 2) * tabWidth //使点击的tab始终在居中位置
 })
 if (this.data.currentTab == current) {
  return false
 } else {
  this.setData({currentTab: current })
 }
 },
 changeContent: function(e) {
 var current = e.detail.current // 获取当前内容所在index,文档有
 var tabWidth = this.data.windowWidth / 5
 this.setData({
  currentTab: current,
  tabScroll: (current - 2) * tabWidth
 })
 }
})

css

.contain{
 width: 100%;
 height: 100%;
}
.tab{
 width: 100%;
 height: 100rpx;
 position: fixed;
 top: 0;
 left: 0;
 z-index: 100;
 white-space: nowrap;
 box-sizing: border-box;
 overflow: hidden;
 line-height: 100rpx;

}
.tab-item{
 display: inline-block;
 width: 20%;
 text-align: center;
 font-size: 14px;
 color: #8f9193;
}
.active{
 color: #ff502c
}
.content{
 padding-top: 100rpx;
 box-sizing: border-box;
 text-align: center;
 font-size: 14px;
}
.content-item{
 overflow-y: scroll
}

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

详解微信小程序设置底部导航栏目方法

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

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

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

本文实例为大家分享了微信小程序顶部导航栏的具体代码,供大家参考,具体内容如下需求:顶部导航栏效果图: wxml:  <view class="navbar"> <text wx:for="{{navbar}}" data-idx="{{index}}" class="item {{currentTab==index ? 'active' : ''}}" wx:key=&qu
微信小程序中顶部导航栏的实现代码

微信小程序中顶部导航栏的实现实例代码: <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
微信小程序教程系列之设置标题栏和导航栏（7）

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

微信小程序开发之顶部导航栏需求:顶部导航栏效果图: wxml:  <view class="navbar"> <text wx:for="{{navbar}}" data-idx="{{index}}" class="item {{currentTab==index ? 'active' : ''}}" wx:key="unique" bindtap=
微信小程序自定义导航隐藏和显示功能

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

需求: iponeX 以上机型,手机底部有弧度,自己写的导航栏会被遮住, 需要判断手机机型,做兼容设置. 解决: //app.js App({ /** * 当小程序初始化完成时,会触发 onLaunch(全局只触发一次) */ onLaunch: function() { var that = this; //获取手机型号 wx.getSystemInfo({ success(res) { const model = res.model; const modelInclude = ["iPhon
微信小程序实现滴滴导航tab切换效果

本文实例为大家分享了微信小程序实现tab切换效果的具体代码,供大家参考,具体内容如下效果图如下: (请自动忽视底部tab.....) 简单介绍一下:顶部导航使用 scroll-view 组件中间的内容部分使用 swiper 组件实现的逻辑就是: 先这样在这样,这样然后那样.(此处省略200个字). 代码如下,复制可用 wxml <view class="contain">  <scroll-view class="t
微信小程序实现登录注册tab切换效果

利用三元运算符实现登录注册效果切换,供大家参考,具体内容如下直接上代码 wxml: <view class='top'> <text class="{{login?'active':''}}" catchtap='login'>登录</text> <text class="{{login?'':'active'}}" catchtap='register'>注册</text> </view>
微信小程序自定义菜单导航实现楼梯效果

设计初衷在开发页面时,往往需要实现,点击页面的导航菜单页面滚动到相应位置,滚动页面实现菜单选项的高亮.在html开发中,我们可以用到a标签锚点实现,jq的动画相结合实现类似效果.在框架中vant UI框架也为我们实现了这一效果. 微信小程序该如何实现?? 效果展示当菜单导航滚动到页面顶部时,菜单吸顶当点击菜单按钮时,切换到对应区域(过渡到该区域,有动画效果) 当内容区滚动到某类区域时,对应区域的菜单按钮高亮设计思路 1.吸顶效果的实现获取菜单导航距离页面顶部距离wx.createSel
微信小程序实现下拉菜单切换效果

本文实例为大家分享了微信小程序实现下拉菜单切换展示的具体代码,供大家参考,具体内容如下效果图: wxml:  <view id="swiper-tab"> <view class="swiper-tab"> <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0"
微信小程序tabBar底部导航中文注解api详解

微信小程序tabBar底部导航中文注解api,信小程序tabBar就是app底部的那个导航栏,可以放1-5导航链接,这里对微信小程序底部导航tabbar的中文解释. 微信小程序tabBar是在全局app.json文件里面配置的. 小程序tabBar配置代码注解 { "pages":[ "pages/index/index", "pages/detail/detail" ], "window":{ "navigatio
微信小程序实现顶部导航特效

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

需求是小程序做头部做导航分类的效果顶部用 scroll-view 组件横向滚动,类似tab选项卡的效果,内容用类似模板方式引用,可重复利用 <scroll-view class="scroll-view_H" scroll-x="{{true}}" style="width: 100%"> <view wx:for="{{classify}}" wx:key="id" data-type
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧不动，右侧滑动)

本文实例讲述了微信小程序MUI侧滑导航菜单.分享给大家供大家参考,具体如下: 实现的目标--YDUI的Popup组件点击列表图标--左侧的菜单栏显示--点击关闭按钮或者右侧的遮罩层--左侧菜单栏关闭实现方案1:左侧菜单和右侧展示页面分为上下两层 wxml <view class="page"> <----下层左侧导航---> <view class="page-bottom"> <view class="pag
微信小程序实现页面导航的方法详解

目录一.页面导航二.声明式导航 1.导航到tabBar页面 2.导航到非tabBar页面 3.后退导航三.编程式导航 1.导航到tabBar页面 2.导航到非tabBar页面 3.后退导航四.导航传参 1.声明式导航传参 2.编程式导航传参 3.在onLoad中接收导航传参五.总结一.页面导航 1.什么是页面导航页面导航是指页面之间的相互跳转. 2.页面导航的两种实现方式页面导航有两种实现方式: 声明式导航方法:在页面声明一个navigator组件,通过点击这个组件来实现页面的

微信小程序实现滴滴导航tab切换效果

相关推荐

随机推荐