vant/vue——tab栏切换上下箭头功能实现
有的tab栏需要点击两次从而达到排序的功能
下面是实现双重tab栏切换功能
css样式
.active {color: red;
}
.black{color: black;
}
标签部分
<ul><liv-for="(item, index) in screen.lis"@click="lisBtn(index)":class="{ active: screen.currentindex === index }":key="index"><span class="span-top-down">{{ item.name }}<van-iconname="arrow-up"class="top":class="{black:item.status === 1 ? 'black' : ''}"/><van-iconname="arrow-down":class="item.status === 2 ? 'black' : ''"class="down"/></span></li>
</ul>
这里对象中要设置一个status值来判断这个箭头显示对应的颜色
data{return{screen: {currentindex: 0,lis: [{name: "综合",status: 1,},{name: "销量",status: 0,},{name: "价格",status: 0,},{name: "筛选",status: 0,},],},}
}
方法部分:获取老的索引和老的状态,判断索引值是否为老的索引,如果是老索引为 默认值(status)1时则返回一个2,不是则还是返回默认值(status)1
如果判断的索引值不等于老的索引,那就生成一个新的状态,把lis列表中的索引值给到新的状态,并让老状态值为0,新状态为1,并且让这个默认的索引值等于index
这样就完成了二级嵌套按钮选项
lisBtn(index) {var oldIndex = this.screen.currentindex;var oldItem = this.screen.lis[oldIndex];if (index == oldIndex) {oldItem.status = oldItem.status === 1 ? 2 : 1;} else {var newItem = this.screen.lis[index];oldItem.status = 0;newItem.status = 1;this.screen.currentindex = index;// console.log(newItem);}},
效果如下:
vant/vue——tab栏切换上下箭头功能实现相关推荐
- apiCloud + aui实现tab栏切换功能
本人apiCloud新手一枚,在学习的过程中,发现aui是一个非常好用的ui框架,我在作apiCloud项目时,最常用的就是aui框架.同时,发现sui也挺好,这两种框架可以同时在项目中混用,但是不能 ...
- vue之tab栏切换
一个简单的tab栏切换组件,由tabs以及tab-pane组成 效果图 使用 <template><div class="container"><ta ...
- 原生JS实现 ‘Tab栏切换’,‘手风琴’,‘轮播图’效果
1.小天使跟随鼠标效果 <!DOCTYPE html> <html lang="en"><head><meta charset=" ...
- 1~22(面向编程+ES6中的类和对象+类的继承+面向对象版tab栏切换)
1 面向对象编程介绍 1.1 两大编程思想 面向过程 面向对象 1.2 面向过程编程POP(Process-oriented programming) 面向过程就是分析出解决问题所需要的步骤,然后用函 ...
- DOM(二):几个NB案例、属性操作(自定义属性)、tab栏切换(重难点)
这里写目录标题 一.几个案例: 案例1:如何实现点击一个按钮亮,其余按钮全灭? 案例2:浏览器换肤效果 案例3:表格隔行变色 案例4:全选框和复选框(难的一塌糊涂) 我自己的逻辑: 老师操作小弟的逻辑 ...
- 使用vant时 tab栏中出现 van-tabs怎么省略号怎么解决
使用vant时 tab栏中出现 van-tabs怎么省略号怎么解决 :ellipsis="false" <template><div><van-tab ...
- 微信小程序点击页面tab栏切换
微信小程序点击页面tab栏切换 wxml <view class="container"><view class="swiper-tab"&g ...
- tab栏切换 动画的相关方法上 动画的相关方法下 隐藏动画案例 隐藏动画练习
tab栏切换 <!DOCTYPE html> <html> <head lang="en"><meta charset="UTF ...
- Android实现连续并排的若干个TextView单击改变背景颜色达到选项卡Tab栏切换效果...
<Android实现连续并排的若干个TextView单击改变背景颜色达到选项卡Tab栏切换效果> 实现的组件交互目的很简单,就是要达到类似tab选项卡的导航栏一样,当用户点击了连续并排的若 ...
最新文章
- 2014-06-27nbsp;20:47
- linux下vim 打开文件方式
- 单片机如何使用振动传感器801s_振动传感器如何跟踪测量机器的健康状况
- java高并发(十七)J.U.C之BlockingQueue
- 【FFmpeg】FFmpeg常用基本命令(转载)
- 什么是 TypeScript 里的 Constructor signature
- autoconf常用宏
- nginx 怎么重新编译安装mysql,centos 下 编译安装 nginx + mysql + php 服务
- 如何成为一名优秀的web前端工程师(前端攻城师)
- 导致集群重启_园区网核心交换机S7706异常重启导致无线网络故障
- 企业中MySQL高可用集群架构三部曲之MM+keepalived
- my android机器人作文,机器人作文400字
- 4.名词性从句的起源与本质
- hdfs 指令_HDFS之一:hdfs命令行操作
- 赶集网–免费发布信息
- 计算机二级的Word知识点,计算机二级word知识点
- Python基础知识总结(期末复习精简版)
- 【深度】广告流量分配HWM算法
- JDBC中executeQuery、executeUpdate和execute之间的区别
- 什么软件可以给视频加字幕?这些软件值得收藏
热门文章
- 物联网测试地图(译)
- 存折打印机EPSON PLQ-20K 联机不打印的设置
- 全球与中国便携式病人监护系统市场应用现状分析与十四展望报告2022-2028年版
- Vue3.x v-html绑定html
- mac 命令行su使用
- 【vba】vab自动化及宏命令
- 【ESXi 6.X升级7.X】ESXi 升级 —— 升级前准备工作,注意事项以及示例 — 使用 vSphere Lifecycle Manager升级 ESXi 6.5 到 7.0.3
- 云计算通识总结(未完待续)
- APP自动化处理拍照
- 有关 车牌识别(一、原理)