如何实现小程序tab栏下划线动画效果

2024-02-20 00:08:33

本文主要介绍了如何实现小程序tab栏下划线动画效果，分享给大家，具体如下：

最终效果

实现

wxml

<view class='abox'>
  <view wx:for="{{title}}" class='{{currentIndex==index?"tabTrue":""}}' bindtap='changeTab' data-aa='{{index}}'>
   {{item}}

  </view>
  <view class='b' style="left:{{left}}px"></view>
</view>

wxss

.abox{
 display: flex;
 flex-direction: row;
 width: 100%;
 justify-content: space-around;
 position: relative;
 padding-bottom: 20rpx;
}

.tabTrue{
 color: red;
}
.b{
 background: red;
 height: 4rpx;
 width:64rpx;
 position: absolute;
 bottom: 0;
 transition: all .3s linear;
}

Page({
 data: {
  title: ["首页","掘金","思否","知乎"],
  currentIndex:"0",
  left:""
 },
 changeTab:function(e){
  //console.log(e)
  this.setData({
   currentIndex: e.currentTarget.dataset.aa
  })
  this.changeline(e)

 },
 changeline:function(){
  const query = wx.createSelectorQuery()
  var _this = this
  query.select('.tabTrue').boundingClientRect()
  query.exec(function (res) {
   _this.setData({
    left: res[0].left
   })
   //console.log(res[0].left)
  })
 },
 onLoad: function () {

  this.changeline(1)

 }
})

上面代码可以实现效果，这里面最重要的就是通过 changeTab方法获取有tabtrue这个class的标签,获取到标签的left值。

微信小程序实现tab和swiper切换结合效果

本文实例为大家分享了小程序实现tab和swiper切换效果展示的具体代码,供大家参考,具体内容如下先上效果图: 实现代码如下: wxml页面 <scroll-view scroll-x="true" class="weui-navbar"> <block wx:for-items="{{tabs}}"> <view id="{{index}}" class="{{activeIndex
微信小程序tabBar用法实例详解

本文实例讲述了微信小程序tabBar用法.分享给大家供大家参考,具体如下: 1.效果展示 2.原理:在app.json中配置tabBar属性 { "pages": [ "index", "picDisplay" ], "window": { "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle&qu
微信小程序 tabs选项卡效果的实现

微信小程序 tabs选项卡效果前言: 最近微信应用号是炒的如火如荼,热门满满,但是也可以发现搜索关键词出来,各类网站出现的还都是微信的官方文档解释.正好赶上这个热潮,这几天先把小程序技术文档看了个遍,就直接着手写案例了.很多组件微信内部已经封装完了,正好发现没有tab选项卡效果,这两天正好研究了下.思路如下: 1.首先点击导航的时候需要两个变量,一个存储当前点击样式类,一个是其它导航默认的样式类 2.选项卡内容列表同样也需要两个变量,一个存储当前显示块,一个存储的是其它隐藏的默认块 3.使用三
微信小程序实现滴滴导航tab切换效果

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

最近微信应用号是炒的如火如荼,热门满满,但是也可以发现搜索关键词出来,各类网站出现的还都是微信的官方文档解释.正好赶上这个热潮,这几天先把小程序技术文档看了个遍,就直接着手写案例了.很多组件微信内部已经封装完了,正好发现没有tab选项卡效果,这两天正好研究了下.思路如下: 1.首先点击导航的时候需要两个变量,一个存储当前点击样式类,一个是其它导航默认的样式类 2.选项卡内容列表同样也需要两个变量,一个存储当前显示块,一个存储的是其它隐藏的默认块 3.使用三目运算通过点击获取导航索引,根据索引判断
微信小程序滚动Tab实现左右可滑动切换

微信小程序滚动Tab实现左右可滑动切换效果: 最终效果如上.问题: 1.tab标题总共8个,所以一屏无法全部显示. 2.tab内容区左右滑动切换时,tab标题随即做标记(active). 3.当active的标题不在当前屏显示时,要使其能显示到当前屏中. 一.wxml结构 tab标题因一排八个,所以使用 scroll-view组件,使其可横向滚动. tab内容可左右滑动切换,使用swiper组件实现为了偷懒,所以数据都通过wx:for遍历重复出来. 说明: 1.设置data-current
微信小程序 Tab页切换更新数据

微信小程序 Tab页切换更新数据微信小程序还处于内测阶段,最不方便的莫过于官方在不停的更新,前几天写的功能隔个几天忽然发现不能用了_(:зゝ∠)_ 功能需求如下: 我在首页点击"5万以上"他会把跳转到买车页然后同时把"5万以上"这个筛选条件带到买车页. 之前navigator导航是可以跳转并携带数据的,但这一次官方更新加了个新东西-----switchTab,专门用来实现tab页的跳转,但禁止携带数据那么如果还想要实现我们的效果只能用别的方法了想了一下有两种思
微信小程序实现tab左右切换效果

本文实例为大家分享了微信小程序实现tab左右切换展示的具体代码,供大家参考,具体内容如下分析 1.设置data-current属性用于:点击当前项时,通过点击事件swichNav中处理e.dataset.current取到点击的目标值. 2.swiper组件的current组件用于控制当前显示哪一页 3.swiper组件绑定change事件switchTab,通过e.detail.current拿到当前页 wxml: <view class="record-box"> &
微信小程序自定义tab实现多层tab嵌套功能

小程序最近是越来越火了-- 做小程序有一段时间了,总结一下项目中遇到的问题及解决办法吧. 项目中有个多 tab 嵌套的需求,进入程序主界面下面有两个 tab,进入A模块后,A模块最底下又有多个tab,每个tab上又嵌了2-4个不等的tab... 这种变态需求只能自定义tab了. 其实如果项目不是很复杂,没有多tab嵌套的需求,完全可以用小程序官方的 tabBar,方便快捷. 官方 tabBar 地址:https://developers.weixin.qq.... 一.Demo结构先看效果图吧
微信小程序实现tab切换效果

微信小程序之tab切换效果,如图: 最近在学习微信小程序并把之前的公司app搬到小程序上,挑一些实现效果记录一下(主要是官方文档里没说的,毕竟官方文档只是介绍功能) .wxml代码: <view class="body"> <view class="nav bc_white"> <view class="{{selected?'red':'default'}}" bindtap="selected"

如何实现小程序tab栏下划线动画效果

相关推荐

随机推荐