微信小程序手写滑动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…...
一文读懂如何安全地存储密码
目录 引言 明文存储 基本哈希存储 加盐哈希存储 适应性哈希算法 密码加密存储 小结 引言 密码是最常用的身份验证手段,既简单又高效。密码安全是网络安全的基石,对保护个人和组织信息的安全具有根本性的作用。然而有关密码泄漏的安全问题一再发生…...
【运维面试100问】(六)buffer和cache的区别
本站以分享各种运维经验和运维所需要的技能为主 《python零基础入门》:python零基础入门学习 《python运维脚本》: python运维脚本实践 《shell》:shell学习 《terraform》持续更新中:terraform_Aws学习零基础入门到最佳实战 《k8…...
创建域名邮箱邮件地址的方法与步骤
如何创建域名邮箱邮件地址?使用Zoho Mail创建域名邮箱邮件地址的步骤简单易懂,操作便捷。从其他邮箱迁移到Zoho Mail的过程也相当顺畅,您可以轻松为所有员工创建具有企业邮箱域名的电子邮件地址。 步骤1:添加并验证您的域名 首先,…...
Qt框架学习(1)
1.安装Qt官网 安装需注意的是,要安装开源版(有钱当我没说),而安装包都是一样的,主要是在注册账户时选择个人开发,而不要选公司,否则在安装时登录账号后会安装商业版Qt. 2.Qt中的快捷键 快捷键解释F4头文件和实现文件切换ShiftF…...
3D电路板在线渲染案例
从概念上讲,这是有道理的,因为PCB印制电路板上的走线从一个连接到下一个连接的路线基本上是平面的。 然而,我们生活在一个 3 维世界中,能够以这种方式可视化电路以及相应的组件,对于设计过程很有帮助。本文将介绍KiCad中基本的3D查看功能,以及如何使用NSDT 3DConvert在线…...
ResizeObserver loop limit exceeded报错解决方案
前言: 控制台没有报错,但是开发Vue项目过程中一直报ResizeObserver loop limit exceeded 错,找到以下解决方式。在main.js文件中重写 ResizeObserver 方法。 main.js文件 (完整版) import { createApp } from "v…...
【OpenCV实现图像:使用OpenCV进行图像处理之透视变换】
文章目录 概要计算公式举个栗子实际应用小结 概要 透视变换(Perspective Transformation)是一种图像处理中常用的变换手段,它用于将图像从一个视角映射到另一个视角,常被称为投影映射。透视变换可以用于矫正图像中的透视畸变&…...
Vue中学习笔记-数据代理
文章目录 前文提要数据代理的概念MVVM模型和Vue中的数据代理M,模型V,视图VM,视图模型 前文提要 本人仅做个人学习记录,如有错误,请多包涵 数据代理的概念 使用一个对象代理对另一个对象中属性的操作。 MVVM模型和Vu…...
IDEA 配置maven结合案例使用篇
1. 项目需求和结构分析 需求案例:搭建一个电商平台项目,该平台包括用户服务、订单服务、通用工具模块等。 项目架构: 用户服务:负责处理用户相关的逻辑,例如用户信息的管理、用户注册、登录等。 spring-context 6.0.…...
基于白鲸算法优化概率神经网络PNN的分类预测 - 附代码
基于白鲸算法优化概率神经网络PNN的分类预测 - 附代码 文章目录 基于白鲸算法优化概率神经网络PNN的分类预测 - 附代码1.PNN网络概述2.变压器故障诊街系统相关背景2.1 模型建立 3.基于白鲸优化的PNN网络5.测试结果6.参考文献7.Matlab代码 摘要:针对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树中触发时,它是如何在各个元素之间传播的。DOM事件传播机制分为三个阶段:捕获阶段、目标阶段和冒泡阶段。此外,还有一种常用的技术称为事件委托,它能够简化事件处理程序的绑定和管理。本文将…...
gitlab利用CI多工程持续构建
搭建CI的过程中有多个工程的时候,一个完美的构建过程往往是子工程上的更新(push 或者是merge)触发父工程的构建,这就需要如下建立一个downstream pipeline 子仓库1 .gitlab-ci.yml stages:- buildbuild_job:stage: buildtrigger:project: test_user/tes…...
【C++初阶】四、类和对象(构造函数、析构函数、拷贝构造函数、赋值运算符重载函数)
相关代码gitee自取: C语言学习日记: 加油努力 (gitee.com) 接上期: 【C初阶】三、类和对象 (面向过程、class类、类的访问限定符和封装、类的实例化、类对象模型、this指针) -CSDN博客 引入:类的六个默认成员函数…...
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:视C为一个语言联邦 条款1中提到了将C看作为一个“语言联邦”的概念。具体来说,“语言联邦”是指将C看作由多种不同的子语言组成的联邦。每种子语言都有自己的惯用法、工具和库,可以用来解决特定的问题。因此,…...
ElementUI table+dialog实现一个简单的可编辑的表格
table组件如何实现可编辑呢? 我的需求是把table组件那样的表格,实现它点击可以弹出一个框,然后在这个框里面输入你的东西,然后将他回显回去,当然,输入的有可能是时间啥的。 为什么要弹出弹层不在框上直接…...
Rust语言精讲:数据类型全解析
大家好!我是lincyang。 今天,我们将深入探讨Rust语言中的数据类型,这是理解和掌握Rust的基础。 Rust语言数据类型概览 Rust是静态类型语言,所有变量类型在编译时确定。Rust的数据类型分为两类:标量类型和复合类型。…...
《数据结构、算法与应用C++语言描述》-代码实现散列表(线性探查与链式散列)
散列表 完整可编译运行代码:Github:Data-Structures-Algorithms-and-Applications/_22hash/ 定义 字典的另一种表示方法是散列(hashing)。它用一个散列函数(也称哈希函数)把字典的数对映射到一个散列表(…...
DSP28335 eQEP模块的M/T法测速详解:从公式推导到代码实现
DSP28335 eQEP模块M/T法测速实战:从寄存器配置到误差优化 在电机控制系统中,精确的速度测量是实现高性能闭环控制的基础。当电机运行范围从每分钟几转到上万转时,传统测速方法往往难以兼顾低速精度和高速响应。TI的DSP28335通过增强型正交编码…...
如何快速将OFD转换为PDF:免费开源工具终极使用指南
如何快速将OFD转换为PDF:免费开源工具终极使用指南 【免费下载链接】Ofd2Pdf Convert OFD files to PDF files. 项目地址: https://gitcode.com/gh_mirrors/ofd/Ofd2Pdf 你是否经常遇到需要将OFD文件转换为PDF格式的情况?无论是处理电子发票、公文…...
real-anime-z镜像免配置:CSDN平台开箱即用,省去Diffusers环境搭建
real-anime-z镜像免配置:CSDN平台开箱即用,省去Diffusers环境搭建 1. 镜像介绍与核心优势 real-anime-z是CSDN星图平台提供的专业动漫风格文生图镜像,专为二次元创作场景优化。这个镜像最大的特点就是开箱即用,用户无需配置复杂…...
从零到一:基于YOLOv8与PySide6构建桌面端目标检测应用
1. 环境准备与工具安装 目标检测应用的开发离不开合适的工具链支持。我们先从最基础的环境搭建开始,这里我推荐使用Python 3.8版本,因为这个版本在兼容性和稳定性方面表现都很不错。安装过程很简单,直接从Python官网下载对应操作系统的安装包…...
为什么Dify 1.3.0要用uv替换Poetry?聊聊Python依赖管理工具的选择与实战
为什么Dify 1.3.0要用uv替换Poetry?聊聊Python依赖管理工具的选择与实战 Python生态中的依赖管理工具一直是开发者们热议的话题。从早期的pip到后来的Pipenv、Poetry,再到如今备受关注的uv,每一次工具的迭代都反映了开发者对效率、稳定性和易…...
DataGrip|SQL 格式化深度调优:从通用规则到复杂语句编排
1. 为什么SQL格式化如此重要? 记得刚入行那会儿,我接手过一个遗留项目。打开SQL文件的那一刻,我差点崩溃——几百行的存储过程像一团乱麻,SELECT、JOIN、WHERE混作一团,有的逗号在行首,有的在行尾ÿ…...
2026年昆山钨钢裁切刀技术大比拼,哪家更强?
随着工业制造的不断进步,工业机械刀具在各个行业中的应用越来越广泛。特别是钨钢裁切刀,因其优异的耐磨性和高精度而备受青睐。本文将对比昆山久利制刀有限公司(久利刀具)与其他几家知名厂家的钨钢裁切刀,从多个维度进…...
LFM2.5-VL-1.6B保姆级教程:从nvidia-smi检测到模型成功加载全过程
LFM2.5-VL-1.6B保姆级教程:从nvidia-smi检测到模型成功加载全过程 1. 模型介绍 LFM2.5-VL-1.6B是由Liquid AI推出的轻量级多模态大模型,专为边缘设备和端侧应用优化设计。这个模型结合了1.2B参数的语言模型和约400M参数的视觉模型,总参数量…...
Waveshare CM5载板工业应用与树莓派扩展方案解析
1. Waveshare CM5载板深度解析:工业级树莓派扩展方案作为一名长期从事嵌入式开发的工程师,我最近测试了Waveshare推出的CM5-ETH-RS485-4G-BASE载板。这款专为树莓派Compute Module 5设计的扩展板,完美融合了工业控制与高性能计算需求。在实际…...
跟北航何静学AI科研,科研小白也能弯道超车
北京航空航天大学90后副教授何静全程讲授,北京大学出版社主办,“从AIGC到OpenClaw:赋能论文撰写、课题申报和智能体构建工作坊(第1期)”。本课程将于2026年5月16日至17日举办,采用边讲边操作的方式…...
