微信小程序选项卡切换(滑动切换,点击切换)

效果如下:可点击切换,滑动切换

在这里插入图片描述
在这里插入图片描述
代码如下
这个可以在项目用

index.wxml

<view class='topTabSwiper'>
    <view class='tab  {{currentData == 0 ? "tabBorer" : ""}}'  data-current = "0" bindtap='checkCurrent'>选项一</view>
    <view class='tab  {{currentData == 1 ? "tabBorer" : ""}}'  data-current = "1" bindtap='checkCurrent'>选项二</view>
</view>
<swiper current="{{currentData}}" class='swiper' style="height:600px;" duration="300" bindchange="bindchange">
  <swiper-item><view class='swiper_con'>TAB1</view></swiper-item> 
  <swiper-item><view class='swiper_con'>TAB2</view></swiper-item>
</swiper>

index.wxss

.tab {
  
  width: 50%;
  text-align: center;
  padding: 10rpx 0;
}

.topTabSwiper {
  display: flex;
  justify-content: space-between;
}
.tabBorer {
  border-bottom: 1px solid #f00;
  color: #f00;
}

.swiper {
  width: 100%;
}

.swiper_con {
  text-align: center;
  width: 100%;
  height: 100%;
  padding: 80rpx 0;
}

index.js

//获取当前滑块的index
  bindchange:function(e){
    const that  = this;
    that.setData({
      currentData: e.detail.current
    })
  },
  //点击切换,滑块index赋值
  checkCurrent:function(e){
    const that = this;

    if (that.data.currentData === e.target.dataset.current){
        return false;
    }else{

      that.setData({
        currentData: e.target.dataset.current
      })
    }
  },

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/57260.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

警惕!中科院预警,Frontiers这本不被收录!2023年7月EI目录已更新!(附全年下载)

2023年7月EI期刊目录更新 爱思唯尔官网近日更新了EI期刊目录&#xff0c;此次更新是2023年7月1日&#xff0c;与上次更新&#xff08;2023年6月&#xff09;相比&#xff0c;有1本期刊名称在Serials&#xff08;连续出版&#xff09;列表中搜索不到&#xff0c;详情如下&#…

Java课题笔记~ 动态SQL详解

一、动态 sql 是什么&#xff1f; 1、动态 SQL 是 MyBatis 的强大特性之一。在 JDBC 或其它类似的框架中&#xff0c;开发人员通常需要手动拼接 SQL 语句。根据不同的条件拼接 SQL 语句是一件极其痛苦的工作。 例如&#xff0c;拼接时要确保添加了必要的空格&#xff0c;还要…

AgileBoot - 全栈项目启动

AgileBoot-Back-End: 基于Ruoyi做了大量重构优化的基础快速开发框架。采用Springboot Vue 3 Mybatis Plus 更面向对象的业务建模 面向生产的项目。&#xff08;非玩具项目&#xff09; 首先克隆代码&#xff0c;同是克隆前端和后端的代码。 前端代码启动&#xff1a; np…

阿里云容器服务 Serverless 版(ACK Serverless)全新升级

7 月 31 日&#xff0c;阿里云智能云原生应用平台负责人丁宇宣布&#xff0c;容器服务 Serverless 版 ACK Serverless 全新升级。 ACK Serverless&#xff1a;免运维、极致弹性的 K8s 全托管服务 阿里云在 2018 年发布了首个 Serverless 容器服务 ASK&#xff0c;其本质是将容…

音视频--DTMF信号发送及检测

参考资料 https://zh.wikipedia.org/wiki/%E5%8F%8C%E9%9F%B3%E5%A4%9A%E9%A2%91 1. DTMF是什么 1.1 DTMF定义 双音多频信号&#xff08;英语&#xff1a;Dual-Tone Multi-Frequency&#xff0c;简称&#xff1a;DTMF&#xff09;&#xff0c;电话系统中电话机与交换机之间…

list删除重复元素几种思路

文章目录 list删除重复元素几种思路hashsetStream流删除所有重复元素 list删除重复元素几种思路 hashset List<String> list2 new ArrayList<>();list2.add("a");list2.add("b");list2.add("a");Set<String> set new HashS…

uni-app 微信小程序自定义导航栏

一、效果图 二、导航栏的组成 上面的导航栏主要由状态栏&#xff08;就是手机电量显示栏&#xff09;和小程序的导航栏组成&#xff0c;android手机一般为48px&#xff0c;ios手机一般为44px 三、开发步骤 1、设置navigationStyle:custom {"path": "pages/v…

1.初识typescript

在很多地方的示例代码中使用的都是ts而不是js&#xff0c;为了使用那些示例&#xff0c;学习ts还是有必要的 JS有的TS都有&#xff0c;JS与TS的关系很像css与less ts在运行前需要先编译为js&#xff0c;浏览器不能直接运行ts 目录 1 编译TS的工具包 1.1 安装 1.2 基本…

【力扣】 12. 整数转罗马数字 模拟

力扣 12. 整数转罗马数字 解题思路 当某个位数的某个数不为4或9时&#xff0c;高位对应的字符总是在低位对应的字符前面。只有当该数为4或9时&#xff0c;低位对应的字符在高位前面。 根据这一特性&#xff0c;我们进行分类讨论。 1.当数为4时&#xff0c;则对应的罗马数为 10 …

有多卷?智慧金融可视化大屏可以这样子

科学技术不断发展&#xff0c;数字化转型不断加快&#xff0c;智慧金融正成为金融业的新引擎。数字孪生、大数据、物联网等新一代信息技术在推动智慧金融更加强调效率、优化精准营销。数据可视化大屏如何为金融单位提供低代码、定制化的服务&#xff0c;让金融单位的数据可视、…

SOME/IP学习笔记1

SOA概念 在SOA中,每个服务就好像我们每一个人在社会中扮演的角色,在对别人提供着服务的同时,同时也享受着别人提供出来的服务,人与人之间,既是彼此独立的,又是需要互相通讯的。服务提供者将功能具象为一组接口,这样使用者就能知道如何调用服务,完成某件事情,得到某个…

文心一言 VS 讯飞星火 VS chatgpt (70)-- 算法导论6.5 9题

九、请设计一个时间复杂度为 (n lgk)的算法&#xff0c;它能够将 k 个有序链表合并为一个有序链表&#xff0c;这里 n 是所有输入链表包含的总的元素个数。(提示:使用最小堆来完成 k 路归并。 文心一言&#xff1a; 要设计一个时间复杂度为 O(n log k) 的算法&#xff0c;将 …

RabbitMQ快速入门

文章目录 1、RabbitMQ的概述1.1、什么是消息队列&#xff1f;1.2、为什么要使用消息队列&#xff1f;1.3、RabbitMQ的特点&#xff1a; 2、RabbitMQ的安装2.1 下载与安装2.2 常用命令 3、RabbitMQ消息发送和接受3.1 消息发送和接受机制3.2 AMQP的消息路由3.3 Exchange(交换机)的…

该选择WPF 还是 Winform?

WPF和WinForms都是.NET平台下的桌面应用程序开发框架&#xff0c;它们各有特点&#xff0c;适用于不同的场景和需求。下面是对WPF和WinForms的一些比较和优劣势&#xff1a;WPF&#xff08;Windows Presentation Foundation&#xff09;&#xff1a;WPF具有强大的图形渲染能力&…

UML—用例图的那些事

目录 背景: 1.用例图的发展史 过程: 1.用例图中的元素和关系 2.应用中的例子 总结&#xff1a; 背景: 1.用例图的发展史 用例图是一种常用的软件工程工具&#xff0c;用于描述系统的功能需求和用户与系统的交互。它在软件开发过程中起到了重要的作用&#xff0c;并且经历了…

使用Vue+CSS实现汉堡图标过渡为叉号图标,有点意思

前言 本文给大家分享三个具有过渡效果的汉堡图标&#xff0c;当点击汉堡图标时&#xff0c;过渡为叉号图标。这种具有过渡特效的图标挺炫酷的&#xff0c;感觉一下子给网页增加一点新颖特色。早在2015年左右&#xff0c;国外挺多优秀门户网站都有使用类似的图标&#xff0c;那…

学无止境·运维高阶③(Mysqldump脚本)

Mysqldump脚本 1、详细脚本2、执行 1、详细脚本 #!/bin/bash mysql_cmd‘-uroot -pRedHat123’ exclude_db‘information_schema|performance_schema|sys’ bak_path/backup/db mysql m y s q l c m d − e ′ s h o w d a t a b a s e s ′ − N ∣ e g r e p − v " {m…

uniapp小程序console.log在微信开发者工具中不打印问题

最近在开发一款uniapp小程序&#xff0c;发现console.log在微信开发者工具中不打印&#xff0c;但在H5页面就能够有打印输出&#xff0c;于是在网上寻找原因… 主要是由于vue.config.js文件中有设置发布时删除console的配置&#xff0c;如下&#xff1a; 官网参考地址&#x…

如何知道企业是否办理过等保备案?哪里可以查询?

对于等保政策细节&#xff0c;大家还存在很多疑问&#xff0c;例如有人在问&#xff0c;如何知道企业是否办理过等保备案&#xff1f;哪里可以查询&#xff1f;今天我们就来简单聊聊&#xff0c;仅供参考。 如何知道企业是否办理过等保备案&#xff1f; 一般企业办理过等保备案…

MySQL的索引使用的数据结构,事务知识

一、索引的数据结构&#x1f338; 索引的数据结构&#xff08;非常重要&#xff09; mysql的索引的数据结构&#xff0c;并非定式&#xff01;&#xff01;&#xff01;取决于MySQL使用哪个存储引擎 数据库这块组织数据使用的数据结构是在硬盘上的。我们平时写的代码是存在内存…