当前位置: 首页 > news >正文

微信小程序手写滑动tab

微信小程序手写滑动tab

index.wxml

<view class="tab-bar">  <scroll-view scroll-x class="tab-scroll">  <block wx:for="{{tabs}}" wx:key="index">  <view class="tab-item {{currentIndex === index ? 'active' : ''}}" bindtap="switchTab" data-index="{{index}}">{{item.title}}</view>  </block>  </scroll-view>  
</view>

index.wxss

.tab-bar {  width: 80%;  height: 60px;  background-color: #fff;  
}  .tab-scroll {  width: 100%;  height: 100%;  white-space: nowrap;  overflow: hidden;  
}  .tab-item {  display: inline-block;  width: auto;  height: 60px;  line-height: 60px;  padding: 0 16px;  font-size: 16px;  text-align: center;  color: #333;  
}  .tab-item.active {  color: #ff0000; /* 选中的标签颜色 */  border-bottom: 2px solid #ff0000; /* 选中的标签下划线 */  
}

index.js

Page({/*** 页面的初始数据*/data: {tabs: [  { title: '标签1', content: '这是标签1的内容' },  { title: '标签2', content: '这是标签2的内容' },  { title: '标签3', content: '这是标签3的内容' }, { title: '标签5', content: '这是标签1的内容' },  { title: '标签6', content: '这是标签2的内容' },  { title: '标签7', content: '这是标签3的内容' },   // 更多标签数据...  ],  currentIndex: 0, // 当前选中的标签索引,},switchTab(event) {  const index = event.currentTarget.dataset.index;  this.setData({ currentIndex: index });  // 在这里可以添加切换标签后的其他逻辑操作  },  /*** 生命周期函数--监听页面加载*/onLoad(options) {},
} ) 

注:简单记录一下,方便开发查找

相关文章:

微信小程序手写滑动tab

微信小程序手写滑动tab index.wxml <view class"tab-bar"> <scroll-view scroll-x class"tab-scroll"> <block wx:for"{{tabs}}" wx:key"index"> <view class"tab-item {{currentIndex index ? acti…...

一文读懂如何安全地存储密码

目录 引言 明文存储 基本哈希存储 加盐哈希存储 适应性哈希算法 密码加密存储 小结 引言 密码是最常用的身份验证手段&#xff0c;既简单又高效。密码安全是网络安全的基石&#xff0c;对保护个人和组织信息的安全具有根本性的作用。然而有关密码泄漏的安全问题一再发生…...

【运维面试100问】(六)buffer和cache的区别

本站以分享各种运维经验和运维所需要的技能为主 《python零基础入门》&#xff1a;python零基础入门学习 《python运维脚本》&#xff1a; python运维脚本实践 《shell》&#xff1a;shell学习 《terraform》持续更新中&#xff1a;terraform_Aws学习零基础入门到最佳实战 《k8…...

创建域名邮箱邮件地址的方法与步骤

如何创建域名邮箱邮件地址?使用Zoho Mail创建域名邮箱邮件地址的步骤简单易懂&#xff0c;操作便捷。从其他邮箱迁移到Zoho Mail的过程也相当顺畅&#xff0c;您可以轻松为所有员工创建具有企业邮箱域名的电子邮件地址。 步骤1&#xff1a;添加并验证您的域名 首先&#xff0c…...

Qt框架学习(1)

1.安装Qt官网 安装需注意的是&#xff0c;要安装开源版(有钱当我没说),而安装包都是一样的&#xff0c;主要是在注册账户时选择个人开发&#xff0c;而不要选公司&#xff0c;否则在安装时登录账号后会安装商业版Qt. 2.Qt中的快捷键 快捷键解释F4头文件和实现文件切换ShiftF…...

3D电路板在线渲染案例

从概念上讲,这是有道理的,因为PCB印制电路板上的走线从一个连接到下一个连接的路线基本上是平面的。 然而,我们生活在一个 3 维世界中,能够以这种方式可视化电路以及相应的组件,对于设计过程很有帮助。本文将介绍KiCad中基本的3D查看功能,以及如何使用NSDT 3DConvert在线…...

ResizeObserver loop limit exceeded报错解决方案

前言&#xff1a; 控制台没有报错&#xff0c;但是开发Vue项目过程中一直报ResizeObserver loop limit exceeded 错&#xff0c;找到以下解决方式。在main.js文件中重写 ResizeObserver 方法。 main.js文件 &#xff08;完整版&#xff09; import { createApp } from "v…...

【OpenCV实现图像:使用OpenCV进行图像处理之透视变换】

文章目录 概要计算公式举个栗子实际应用小结 概要 透视变换&#xff08;Perspective Transformation&#xff09;是一种图像处理中常用的变换手段&#xff0c;它用于将图像从一个视角映射到另一个视角&#xff0c;常被称为投影映射。透视变换可以用于矫正图像中的透视畸变&…...

Vue中学习笔记-数据代理

文章目录 前文提要数据代理的概念MVVM模型和Vue中的数据代理M&#xff0c;模型V&#xff0c;视图VM&#xff0c;视图模型 前文提要 本人仅做个人学习记录&#xff0c;如有错误&#xff0c;请多包涵 数据代理的概念 使用一个对象代理对另一个对象中属性的操作。 MVVM模型和Vu…...

IDEA 配置maven结合案例使用篇

1. 项目需求和结构分析 需求案例&#xff1a;搭建一个电商平台项目&#xff0c;该平台包括用户服务、订单服务、通用工具模块等。 项目架构&#xff1a; 用户服务&#xff1a;负责处理用户相关的逻辑&#xff0c;例如用户信息的管理、用户注册、登录等。 spring-context 6.0.…...

基于白鲸算法优化概率神经网络PNN的分类预测 - 附代码

基于白鲸算法优化概率神经网络PNN的分类预测 - 附代码 文章目录 基于白鲸算法优化概率神经网络PNN的分类预测 - 附代码1.PNN网络概述2.变压器故障诊街系统相关背景2.1 模型建立 3.基于白鲸优化的PNN网络5.测试结果6.参考文献7.Matlab代码 摘要&#xff1a;针对PNN神经网络的光滑…...

Android使用Kotlin利用Gson解析多层嵌套Json数据

文章目录 1、依赖2、解析 1、依赖 build.gradle(app)中加入 dependencies { implementation com.google.code.gson:gson:2.8.9 }2、解析 假设这是要解析Json数据 var responseStr "{"code": 200,"message": "操作成功","data&quo…...

DOM事件的传播机制

DOM事件的传播机制是指当一个事件在DOM树中触发时&#xff0c;它是如何在各个元素之间传播的。DOM事件传播机制分为三个阶段&#xff1a;捕获阶段、目标阶段和冒泡阶段。此外&#xff0c;还有一种常用的技术称为事件委托&#xff0c;它能够简化事件处理程序的绑定和管理。本文将…...

gitlab利用CI多工程持续构建

搭建CI的过程中有多个工程的时候&#xff0c;一个完美的构建过程往往是子工程上的更新(push 或者是merge)触发父工程的构建&#xff0c;这就需要如下建立一个downstream pipeline 子仓库1 .gitlab-ci.yml stages:- buildbuild_job:stage: buildtrigger:project: test_user/tes…...

【C++初阶】四、类和对象(构造函数、析构函数、拷贝构造函数、赋值运算符重载函数)

相关代码gitee自取&#xff1a; C语言学习日记: 加油努力 (gitee.com) 接上期&#xff1a; 【C初阶】三、类和对象 &#xff08;面向过程、class类、类的访问限定符和封装、类的实例化、类对象模型、this指针&#xff09; -CSDN博客 引入&#xff1a;类的六个默认成员函数…...

js粒子效果(二)

效果: 代码: <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Particle Animation</title><…...

01.让自己习惯C++

让自己习惯C 条款1&#xff1a;视C为一个语言联邦 条款1中提到了将C看作为一个“语言联邦”的概念。具体来说&#xff0c;“语言联邦”是指将C看作由多种不同的子语言组成的联邦。每种子语言都有自己的惯用法、工具和库&#xff0c;可以用来解决特定的问题。因此&#xff0c;…...

ElementUI table+dialog实现一个简单的可编辑的表格

table组件如何实现可编辑呢&#xff1f; 我的需求是把table组件那样的表格&#xff0c;实现它点击可以弹出一个框&#xff0c;然后在这个框里面输入你的东西&#xff0c;然后将他回显回去&#xff0c;当然&#xff0c;输入的有可能是时间啥的。 为什么要弹出弹层不在框上直接…...

Rust语言精讲:数据类型全解析

大家好&#xff01;我是lincyang。 今天&#xff0c;我们将深入探讨Rust语言中的数据类型&#xff0c;这是理解和掌握Rust的基础。 Rust语言数据类型概览 Rust是静态类型语言&#xff0c;所有变量类型在编译时确定。Rust的数据类型分为两类&#xff1a;标量类型和复合类型。…...

《数据结构、算法与应用C++语言描述》-代码实现散列表(线性探查与链式散列)

散列表 完整可编译运行代码&#xff1a;Github:Data-Structures-Algorithms-and-Applications/_22hash/ 定义 字典的另一种表示方法是散列&#xff08;hashing&#xff09;。它用一个散列函数&#xff08;也称哈希函数&#xff09;把字典的数对映射到一个散列表&#xff08…...

VS Code 调试 Go 程序时让 stdin 可输入(实战指南)

在 VS Code 调试 Go 程序时让 stdin 可输入&#xff08;实战指南&#xff09;适用于&#xff1a;在 VS Code 中使用 Go 扩展 delve 调试器&#xff08;Windows / macOS / Linux&#xff09;。本文以 Windows PowerShell 为例。目录 问题描述原因分析解决方案&#xff08;快速…...

从一次线上故障复盘:深度解析AutoSar WDGM如何守护你的ECU核心任务链

从一次线上故障复盘&#xff1a;深度解析AutoSar WDGM如何守护你的ECU核心任务链 在汽车电子控制单元&#xff08;ECU&#xff09;开发中&#xff0c;功能安全始终是悬在工程师头顶的达摩克利斯之剑。去年我们团队遭遇了一次典型的线上故障&#xff1a;某个关键SWC任务链因执行…...

从5G到Wi-Fi:工程师如何在实际项目中权衡频谱利用率与误码率?一份避坑指南

从5G到Wi-Fi&#xff1a;工程师如何在实际项目中权衡频谱利用率与误码率&#xff1f;一份避坑指南 在物联网终端设计中&#xff0c;工程师常常面临一个核心矛盾&#xff1a;高频谱利用率意味着更高的数据传输速率&#xff0c;而低误码率则代表更稳定的连接质量。这种权衡不仅影…...

从部署到解释:如何用Alibi + Seldon Core给你的AI服务加上‘可解释性’API

构建可解释AI微服务&#xff1a;Alibi与Seldon Core的工程化实践 当机器学习模型从实验室走向生产环境时&#xff0c;"黑箱效应"往往成为阻碍业务落地的最后一公里。金融风控系统拒绝贷款申请时需说明具体原因&#xff0c;医疗影像诊断AI必须标注关键病灶区域&#x…...

让百考通AI替你“填表”,搞定毕业论文初稿不熬夜

填完几个关键信息&#xff0c;一份逻辑清晰、格式规范的论文初稿便跃然屏上&#xff0c;毕业季的深夜从此不再只有焦虑。 又是一年毕业季&#xff0c;图书馆灯火通明&#xff0c;键盘声此起彼伏。屏幕前的大四学生对着空白文档&#xff0c;眼神里写满了茫然与疲惫&#xff1a;选…...

fastp性能优化秘籍:如何根据数据类型选择最佳参数配置

fastp性能优化秘籍&#xff1a;如何根据数据类型选择最佳参数配置 【免费下载链接】fastp An ultra-fast all-in-one FASTQ preprocessor (QC/adapters/trimming/filtering/splitting/merging...) 项目地址: https://gitcode.com/gh_mirrors/fa/fastp fastp是一款超快速…...

Supergateway与ngrok结合:如何安全地公开本地MCP服务器

Supergateway与ngrok结合&#xff1a;如何安全地公开本地MCP服务器 【免费下载链接】supergateway Run MCP stdio servers over SSE and SSE over stdio. AI gateway. 项目地址: https://gitcode.com/gh_mirrors/su/supergateway Supergateway是一款功能强大的MCP服务器…...

WeDLM-7B-Base精彩案例分享:从‘春天来了’到百字散文的完整生成过程

WeDLM-7B-Base精彩案例分享&#xff1a;从"春天来了"到百字散文的完整生成过程 1. 模型简介 WeDLM-7B-Base是一款基于扩散机制&#xff08;Diffusion&#xff09;的高性能基座语言模型&#xff0c;拥有70亿参数。它采用创新的并行解码技术&#xff0c;在标准因果注…...

3步解决演唱会抢票难题:终极自动抢票工具实战指南

3步解决演唱会抢票难题&#xff1a;终极自动抢票工具实战指南 【免费下载链接】Autoticket 大麦网自动抢票工具 项目地址: https://gitcode.com/gh_mirrors/au/Autoticket 面对热门演唱会门票秒光的困境&#xff0c;手动抢票成功率不足10%。Autoticket是一款基于Python和…...

Blender3mfFormat:Blender专业3D打印格式转换终极指南

Blender3mfFormat&#xff1a;Blender专业3D打印格式转换终极指南 【免费下载链接】Blender3mfFormat Blender add-on to import/export 3MF files 项目地址: https://gitcode.com/gh_mirrors/bl/Blender3mfFormat Blender3mfFormat是一个功能强大的Blender插件&#xf…...