小程序怎么打出横线效果_如何实现小程序tab栏下划线动画效果

￡神魔★判官ぃ 2023-01-01 06:51 132阅读 0赞

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

最终效果

![Image 1][]

实现

wxml

\{ \{item\}\}

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;

\}

js

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值。

本条技术文章来源于互联网，如果无意侵犯您的权益请点击此处反馈版权投诉

本文系统来源：php中文网

[Image 1]:

发表评论取消回复

表情：

评论列表（有 0 条评论，132人围观）

还没有评论，来说两句吧...

相关阅读

相关微信小程序——实现tab切换效果

效果图如下：点击那个tab标题就显示对应内容，并高亮显示对应的下划线。 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_t

一时失言乱红尘/ 2023年02月21日 11:43/ 0 赞/ 44 阅读

相关小程序怎么打出横线效果_如何实现小程序tab栏下划线动画效果

本文主要介绍了如何实现小程序tab栏下划线动画效果，分享给大家，具体如下：最终效果 ![Image 1][] 实现 wxml \{ \{item\}\} wxss

￡神魔★判官ぃ/ 2023年01月01日 06:51/ 0 赞/ 133 阅读

相关微信小程序之tab切换效果

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

r囧r小猫/ 2022年12月29日 02:11/ 0 赞/ 194 阅读

相关微信小程序实现卡片切换动画效果

index.wxml <view class="xin"> <view class="title">你有一封新的信件</view> <view cla

比眉伴天荒/ 2022年12月27日 11:13/ 0 赞/ 186 阅读

相关小程序实现滑动吸附效果

wxml <view class="container"> <view class="header-top"></view> <view

àì夳堔傛蜴生んèń/ 2022年10月11日 15:54/ 0 赞/ 263 阅读

相关小程序底部弹出框效果

问题描述：点击使用说明，弹出消息框，显示相关信息（1）wxml页面 <view class='explain' bindtap="show"> <te

淩亂°似流年/ 2022年05月15日 05:21/ 0 赞/ 553 阅读

相关小程序实现跑马灯效果

跑马灯效果比较常见，一般做电商类的小程序都会使用到; ![在这里插入图片描述][20181112114423109.gif] 跑马灯效果的制作制作方式很简单，先方

素颜马尾好姑娘i/ 2022年04月17日 02:55/ 0 赞/ 605 阅读

相关小程序中实现VR效果

小程序中实现VR效果最近的工作中有一个奇葩的需求，就是更根据房间场景图，打开摄像机或者上传图片来适配不同的背景图，类似于VR的效果。一开始百度搜索，发现小程序根本没

末蓝、/ 2022年04月03日 12:13/ 0 赞/ 1670 阅读

相关微信小程序-渐入渐出动画效果实现

前言在做小程序列表展示的时候，接到了一个需求。需要在列表展示的时候加上动画效果。设计视频效果如下图：需要在进入列表页的时候，依次展示每一条卡片，在展示完成后需要隐藏

小鱼儿/ 2022年01月20日 05:27/ 0 赞/ 915 阅读

相关小程序请假效果

var dateTimePicker = require('../../utils/dateTimePicker.js'); Page({ // 页

末蓝、/ 2021年09月17日 03:08/ 0 赞/ 419 阅读