微信小程序手写滑动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) {},
} ) 

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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

jvs-智能bi(自助式数据分析)11.21更新功能上线

jvs智能bi更新功能 新增: 1.字段设置节点新增自定义时间格式功能&#xff1b; 自定义功能允许用户根据需要自定义日期和时间字段的显示格式&#xff0c;为用户提供了更大的灵活性和便利性 2.图表时间搜索条件新增向下兼容模式&#xff1b; 时间搜索条件的向下兼容模式允许用…

超级会员卡积分收银系统源码 会员卡+积分商城+收银功能+多门店系统 附带完整的搭建教程

线上线下的融合已经成为趋势。在这个过程中&#xff0c;会员卡积分收银系统成为了许多企业不可或缺的一部分。该系统以超级会员卡为基础&#xff0c;结合积分商城、收银功能以及多门店系统&#xff0c;为企业提供了一站式的解决方案&#xff0c;帮助企业实现线上线下会员一体化…

linux上java解加密(AES CBC)异常

linux上java解加密(AES/CBC)异常&#xff1a;java.lang.SecurityException: JCE cannot authenticate the provider BC办法 用mapreduce做数据清洗的时候&#xff0c;需要对数据进行解密&#xff0c;加密方法是&#xff1a;AES/CBC/PKCS7Padding&#xff0c;由于java本身不支持…

11.数据公式中使用2个 $$ a =b $$,是什么意思?

在 LaTeX 中&#xff0c;双美元符号 $$ 用于进入和退出独立的数学模式&#xff0c;也就是数学公式模式。在 $$ 中的文本将被视为数学公式&#xff0c;并以数学排版的方式显示。 具体地说&#xff0c;$$ 的使用是为了在文档中创建居中显示的独立数学公式。这意味着公式将单独占…

汽车托运汽车会产生公里数吗?

汽车托运&#xff0c;顾名思义就是把汽车放在板车上进行托运&#xff0c;既然是被托运&#xff0c;那为什么还会产生公里数呢?是被司机私用了吗?还是被当成租赁工具租借出去了呢? 其实不然&#xff0c;回到托运流程里&#xff0c;特别是大板车&#xff0c;我们的线路有很多需…

Android WebView中打开外部超链接无反应

什么是外部超链接&#xff1f; 相当于是跳转到一个新的网址页面 解决方案选择&#xff1a; 1.在WebView内部中打开外部超链接 设置setSupportMultipleWindows为false即可 webView.settings.setSupportMultipleWindows(false)2.打开系统浏览器打开新页面 设置setSupportMul…

最全分布式面试题整理

什么是分布式系统&#xff1f; 分布式系统是由多台计算机通过网络互相连接&#xff0c;共同完成任务的系统。这些计算机协同工作&#xff0c;共享资源和信息&#xff0c;以提高整体性能和可靠性。分布式系统的设计旨在解决单一计算机系统所面临的性能瓶颈和可靠性问题&#xf…

使用CSS渲染不同形状

本文只是用来记录自己遇到的图形 1.图形一 2.图形二 3.图形三 4.图形四 5.图形五

Java 网络编程、e-mail、多线程编程

一、Java 网络编程&#xff1a; 网络编程时指编写运行在多个设备的程序&#xff0c;这些设备通过网络连接起来。 Java.net包中的J2SE的API包含有类和接口&#xff0c;提供低层次的通信细节。 java.net 包中提供了两种常见的网络协议的支持&#xff1a; TCP&#xff1a;TCP&…

Windows安装Linux双系统教程

&#x1f4bb;Windows安装Linux双系统教程 &#x1f959;资源准备&#x1f354;启动盘制作&#x1f373;分区&#x1f32d;重启电脑&#x1f371;安装Ubuntu &#x1f959;资源准备 &#x1f4a1;下载ubuntu系统、refus启动盘制作程序&#x1f448; &#x1f4a1;一个U盘 &am…

“探秘淘宝商品详情接口:获取电商数据的新途径“

淘宝商品详情接口的技术贴 一、概述 淘宝商品详情接口&#xff0c;也称为淘宝商品详情API&#xff0c;是一个用于获取淘宝商品详情的接口。它可以帮助开发者快速获取淘宝商品信息&#xff0c;从而构建自己的电商应用程序。本文将详细介绍淘宝商品详情接口的使用方法、技术细节…

源码编译CEF(branch=6045)+mp4+mp3笔记

接触Chromium已经过去多年了&#xff0c;一直都依赖别人编译的库&#xff0c;最近想自己整一个&#xff0c;所以有了这篇笔记。 环境要求&#xff1a;WIN10&#xff0c;内存16G&#xff0c;固态硬盘空间200G,VS2022&#xff0c;科学上网&#xff08;具体配置我这边不需要&#…

问题:vue2修改对象属性值,数据改变,但是页面视图不更新

目的&#xff1a;修改对象node的child属性的值&#xff0c;页面响应式变化 问题&#xff1a;数据是变了&#xff0c;但是页面没反应&#xff1b;在页面中用v-if绑定这个值&#xff0c;数据变了&#xff0c;视图也是不更新 错误写法&#xff1a; this.node.child ""…

TF签名上架

TF签名上架是一种通过上架苹果的内测商城TestFlight实现应用分发的技术。app封装打包这种技术相对于上架App Store来说较为宽松&#xff0c;但一般需要等待1-3天甚至更长的审核期。对于大多开发者来说&#xff0c;自行TF上架可能存在较高的驳回率&#xff0c;同时可能面临更漫长…

定时器的使用

目录 前言 正文 1.方法 schedule(TimerTask task, Date time) 的测试 &#xff08;1&#xff09;执行任务的时间晚于当前时间(在未来执行)的效果 &#xff08;2&#xff09;线程TimerThread不销毁的原因 &#xff08;3&#xff09;使用 public void cancel() 方法实现 T…

手写promis(2)-- 链式编程篇

目录 链式编程 处理异常 和普通内容 链式编程---处理返回promise 链式编程---处理重复引用 链式编程--rejected 链式编程--处理padding状态 链式编程 处理异常 和普通内容 1.返回promise实例&#xff1a;在原本then方法里边创建新promise2.获取返回值&#xff1a;把原本…

监控易:IT基础资源监控的解决方案和价值

随着企业业务的不断发展&#xff0c;IT基础资源监控的重要性日益凸显。IT基础资源监控不仅需要对网络、服务器、操作系统等基础设备进行实时监控&#xff0c;还需要对业务应用及安全设备进行全方位的管控。本文将详细介绍监控易运维管理软件对于IT基础资源监控的问题和挑战、解…

“SRP模型+”多技术融合在生态环境脆弱性评价模型构建、时空格局演变分析与RSEI 指数的生态质量评价及拓展应用

近年来&#xff0c;国内外学者在生态系统的敏感性、适应能力和潜在影响等方面开展了大量的生态脆弱性研究&#xff0c;他们普遍将生态脆弱性概念与农牧交错带、喀斯特地区、黄土高原区、流域、城市等相结合&#xff0c;评价不同类型研究区的生态脆弱特征&#xff0c;其研究内容…

Vue和React对比

Vue和React都是流行的前端JavaScript框架&#xff0c;它们有很多相似点和不同点&#xff0c;以下是它们的优缺点。 相似点&#xff1a; 都使用了组件化的开发模式&#xff0c;使得应用程序更易于理解和维护。都支持虚拟DOM&#xff0c;提高了页面重绘性能。都支持模板化编程方…

基于安卓android微信小程序的小型企业人力资源管理系统-人事考勤app

运行环境 开发语言&#xff1a;Java 框架&#xff1a;ssm JDK版本&#xff1a;JDK1.8 服务器&#xff1a;tomcat7 小程序框架&#xff1a;uniapp 小程序开发软件&#xff1a;HBuilder X 小程序运行软件&#xff1a;微信开发者 项目介绍 基于微信小程序的小型企业人力资源管…