首页 > 编程语言 >小程序手写tab切换下边框跟随移动特效

小程序手写tab切换下边框跟随移动特效

时间:2023-08-16 17:33:05浏览次数:46  
标签:translateX 边框 item animation tab animationData 手写 setData

简单效果就是这样,主要是用到微信的动画和获取元素信息left处理。

具体来说就是先给红色的边一个固定位置,等到点击切换下一个按钮的时候,获取到下一个按钮的left信息,然后对红色边框使用translateX动画效果,代码如下:

wxml

<view class="tab">
    <view bindtap="changeType" id="a1" data-id="#a1" class="item {{typeIndex == 0 ? 'active' : ''}}" data-index="0">还款计划</view>
    <view bindtap="changeType" id="a2" data-id="#a2" class="item {{typeIndex == 1 ? 'active' : ''}}" data-index="1">还款记录</view>
</view>
<view animation="{{animationData}}" style="background:red;height:10rpx;width:178px"></view>

wxss

.tab {
    width: calc(100% - 40rpx);
    margin: 20rpx auto;
    border:1px solid #3F58FD;
    border-radius: 10rpx;
    display: flex;
    justify-content: space-between;
    height: 60rpx;
}
.tab .item {
    flex: 1;
    height: 60rpx;
    line-height: 60rpx;
    text-align: center;
    font-size: 30rpx;
    color: #243656;
}
.tab .item:first-child {
    border-right: 1px solid #3f58fd;
}
.tab .item.active {
    color: #3f58fd;
    font-weight: 600;
}

js

Page({
    data: {
        typeIndex:0,
        animationData: {}
    },
    onShow: function(){
        var animation = wx.createAnimation({
            duration: 500,
            timingFunction: 'ease',
        })
        this.animation = animation
        animation.translateX(10).step()
        this.setData({
            animationData:animation.export()
        })
    },
    changeType(e){
wx.createSelectorQuery().select(e.currentTarget.dataset.id).boundingClientRect(res=>{
            var animation = this.animation.translateX(res.left).step()
            this.setData({
                animationData:animation.export()
            })
        }).exec()
        this.setData({
            typeIndex:e.currentTarget.dataset.index
        })
    }
})

 

标签:translateX,边框,item,animation,tab,animationData,手写,setData
From: https://www.cnblogs.com/dayin1/p/17635736.html

相关文章

  • 记录一个解决方法- 使用editableProTable表头筛选,无法重置,位置偏移
    问题如图:切换原始告警和收敛告警以后,由于二者用到同一个table,切换之后再点击筛选条件,则筛选框的位置发生偏移解决办法:给table一个key属性,改变table中的数据或者列时,去改变这个唯一的key,key值改变,table就可以重新渲染了!......
  • C++ 中的 map, unordered_map, cc_hash_table, gp_hash_table 简记
    做题时,常常会用到查重操作,可以使用STL中的map与unordered_map,也可以使用“平板电视”中的cc_hash_table和gp_hash_table实现。\(\texttt{map}\)map的内部实现是红黑树,插入、查找元素的时间复杂度都是\(O(\logn)\)。map<int,bool>m;intn;cin>>n;for(inti=1;......
  • Databend 开源周报第 106 期
    Databend是一款现代云数仓。专为弹性和高效设计,为您的大规模分析需求保驾护航。自由且开源。即刻体验云服务:https://app.databend.cn。What'sOnInDatabend探索Databend本周新进展,遇到更贴近你心意的Databend。数据脱敏Databend新增数据脱敏能力。通过设定脱敏策略......
  • Ansible 批量100台服务器添加 Crontab
    Ansible 是使用Python开发的自动化运维工具。它可以配置管理,部署软件并编排更高级的任务,例如持续部署或零停机滚动升级。Ansible可以用来管理crontab。Crontab 是一个用于在Unix和Unix-like操作系统上执行定期任务的工具,它允许用户在预定的时间间隔内自动运行命令或脚本......
  • Databend 开源周报第 106 期
    Databend是一款现代云数仓。专为弹性和高效设计,为您的大规模分析需求保驾护航。自由且开源。即刻体验云服务:https://app.databend.cn。What'sOnInDatabend探索Databend本周新进展,遇到更贴近你心意的Databend。数据脱敏Databend新增数据脱敏能力。通过设定脱敏策略......
  • Vue进阶(幺伍贰):el-table-column :key 应用
    (文章目录)一、前言在前端项目开发过程中,el-table展示的结果列使用组件形式引入,其中某些字段通过:formatter方法转码,结果栏位的字段显示/隐藏控制也使用组件形式引入,前端在控制字段显示属性时,发现码值转换及字段信息展示均有问题。二、问题分析通过阅读代码结构,发现el-table-co......
  • ADM4016I The index indexName on the source table source-table does not match any
    ADM4016I Theindex indexName onthesourcetable source-table doesnotmatchanypartitionedindexesonthetargettable target-table .ALTERTABLEATTACHprocessingcontinues.https://www.ibm.com/docs/en/db2/10.5?topic=messages-adm0000-adm5999LastUp......
  • Stable Diffusion学习笔记
    一、使用讯飞星火大模型生成StableDiffusionprompt(提示词)#StableDiffusionprompt助理你来充当一位有艺术气息的StableDiffusionprompt助理。##任务我用自然语言告诉你要生成的prompt的主题,你的任务是根据这个主题想象一幅完整的画面,然后转化成一份详细的、高......
  • vscode tab 跳转 enter补全
    原链接vscode->左下角设置->键盘快捷键方式->json模式[{"key":"tab","command":"acceptSelectedSuggestion","when":"suggestWidgetVisible&&textInputFocus"......
  • crontab命令
    crontab命令用于管理crontab任务调度。crontab负责按照事先设置的时间自动执行指定的系统任务或命令。常用的crontab命令有:crontab-e:编辑当前用户的crontab任务。crontab-l:显示当前用户的crontab任务。crontab-r:删除当前用户的所有crontab任务。cronta......