微信小程序之vue按钮切换内容变化

效果图如下；

上代码

<template><view class="content"><view class="searchDiv"><view class="paytab"><view class="buttab" v-for="(t,index) in tabList" :key="index" @click="tabsOn(t.id)" ><text :class="t.id == tabsId ? 'fontColorBox' : 'default'">{{t.title}}</text><hr :class="t.id == tabsId ? 'lineBox' : 'default'"/></view></view><view class="jzalldiv"><image class="paylog" src="../../static/images/1.png"></image><view class="jzall" bindtap="showSelectBox">支付宝	</view> <image class="sanjiao" src="../../static/sanjiao.png"></image><input type="text" class="moneyInput" placeholder="￥0.00"/></view></view><!-- 内容布局 --><swiper @click="slideOn" :current="tabsId" circular><!-- circular 启用循环滑动 --><swiper-item><view class="paytypelist"><view class="paytype"><image src="../../static/images/1.png" class="typeImg"></image><view class="typeName">蔬菜</view></view><view class="paytype"><image src="../../static/images/1.png" class="typeImg"></image><view class="typeName">蔬菜</view></view><view class="paytype"><image src="../../static/images/1.png" class="typeImg"></image><view class="typeName">蔬菜</view></view><view class="paytype"><image src="../../static/images/1.png" class="typeImg"></image><view class="typeName">蔬菜</view></view><view class="paytype"><image src="../../static/images/1.png" class="typeImg"></image><view class="typeName">蔬菜</view></view><view class="paytype"><image src="../../static/images/1.png" class="typeImg"></image><view class="typeName">蔬菜</view></view><view class="paytype"><image src="../../static/images/1.png" class="typeImg"></image><view class="typeName">蔬菜</view></view><view class="paytype"><image src="../../static/images/1.png" class="typeImg"></image><view class="typeName">蔬菜</view></view><view class="paytype"><image src="../../static/images/1.png" class="typeImg"></image><view class="typeName">蔬菜</view></view><view class="paytype"><image src="../../static/images/1.png" class="typeImg"></image><view class="typeName">自定义</view></view></view></swiper-item><swiper-item><view class="paytypelist"><view class="paytype"><image src="../../static/images/1.png" class="typeImg"></image><view class="typeName">蔬菜</view></view><view class="paytype"><image src="../../static/images/1.png" class="typeImg"></image><view class="typeName">蔬菜</view></view><view class="paytype"><image src="../../static/images/1.png" class="typeImg"></image><view class="typeName">蔬菜</view></view><view class="paytype"><image src="../../static/images/1.png" class="typeImg"></image><view class="typeName">蔬菜</view></view><view class="paytype"><image src="../../static/images/1.png" class="typeImg"></image><view class="typeName">蔬菜</view></view><view class="paytype"><image src="../../static/images/1.png" class="typeImg"></image><view class="typeName">蔬菜</view></view><view class="paytype"><image src="../../static/images/1.png" class="typeImg"></image><view class="typeName">蔬菜</view></view></view></swiper-item><swiper-item><view class="paytype"><image src="../../static/images/1.png" class="typeImg"></image><view class="typeName">蔬菜</view></view><view class="paytype"><image src="../../static/images/1.png" class="typeImg"></image><view class="typeName">蔬菜</view></view><view class="paytype"><image src="../../static/images/1.png" class="typeImg"></image><view class="typeName">自定义</view></view></swiper-item></swiper></view></template><script>export default {data() {return {"tabList": [// tab选项{title: "支出",id: "0",},{title: "收入",id: "1",},{title: "转账",id: "2",},],"tabsId": 0, //默认选型为装备}},methods: { // 滑动时触发的事件slideOn(e) {this.tabsId=e;},//点击tab时触发tabsOn(e) {this.tabsId= e;},}}</script><style>.paytype,.jdheadtitle1,.jdtop,.jdbottom,.jdheaddiv,.jdlist,.jdhead,.jdtitle,.selectTime,.picsView,.moneyInput,.paylog,.buttab,.paytab,.quxBut,.submitBut,.paybeizhu,.paytypelist,.outmoney,.jzalldiv,.sanjiao,.jzall{float: left;}.default{}.fontColorBox {/* 选中tab样式 */color: black;font-size: 25px;font-weight: bold;}.lineBox {/* 线条样式 */width: 90rpx;height: 8rpx;background: black;margin-top: 7rpx;border-radius: 4rpx;}.addImgBtn {width:100%;float: left;margin-left: 30rpx;margin-top: 20rpx;border-top: 1rpx solid rgba(68,68,68,0.1);display: flex;align-items: center;justify-content: space-between;padding: 12rpx 24rpx;font-size: 30rpx;font-family: PingFang SC;font-weight: bold;color: #333333;}.addImgBtn image {float: left;width: 50rpx;height: 50rpx;}.picsView{margin-left: 30rpx;}.addImgBtn text{font-size: 11px;color: #2979FF;font-weight: 100;}.moneyInput{width: 50%;height: 40px;text-align: right;margin-left: 8%;font-size: 22px;font-weight: bold;}.buttab{height: 100%;margin-left: 10%;font-size: 20px;/* border-bottom: 2px solid red; */}.paytab{width: 80%;margin-left: 15%;height: 30px;}.quxBut{background-color: red;}.submitBut{background-color: #7CFC00;	margin-bottom: 30px;}.quxBut,.submitBut{width: 80%;height: 25px;margin-left: 10%;margin-top: 15px;border-radius: 5px;text-align: center;padding-top: 5px;color: 	white;}.paybeizhu{width: 80%;height: 120px;padding-left: 5px;padding-top: 5px;border-radius: 10px;margin-left: 10%;margin-top: 20px;border: 1px solid #C0C0C0;}.paytypelist{width: 80%;margin-top: 10px;margin-left: 10%;}.paytype{width: 13%;height: 60px;margin-top: 10px;margin-left: 6%;font-size: 12px;border-radius: 10px;}.typeImg{float: left;width: 100%;height: 40px;border-radius: 50%}.typeName{float: left;width: 100%;height: 20px;padding-top: 5px;text-align: center;}.dbTab{position: fixed;z-index: 29;width:40px;height:40px;border-radius: 50%;display: block;bottom: 10px;left: 48%;}.jdheadtitle1,.jdheadtitle2{font-size: 17px;}.jdheadtitle1{width: 70%;margin-top: 2%;overflow:hidden;white-space:nowrap; text-overflow:ellipsis;}.jdheadtitle2{float: right;margin-right: 3%;margin-top: 2%;}.jdtop,.jdbottom{width:100%;height: 30px;}.jdbottom{padding-top: 5px;color: #cdcdcd;font-size: 12px;}.jdlist:first-child{margin-top: 120px;}.jdlist{width: 100%;height: 60px;}.jdheaddiv{width: 20%;height: 60px;}.jdhead{width: 50px;height: 50px;margin-top: 5px;margin-left: 15px;}.jdtitle{width:80%;height: 60px;border-bottom: 1px solid #e7e6e1;}.jzalldiv{width: 90%;height: 40px;margin-top: 20px;padding-bottom: 5px;padding-top: 10px;background-color: #F5F5F5;margin-left: 5%;border-radius: 10px;}.jzall{margin-left: 10px;margin-top: 5px;font-weight: bold;font-size: 20px;}.paylog{width: 35px;height:35px;margin-left: 10px;}.sanjiao{width: 12px;height: 12px;margin-left: 5px;margin-top: 15px;}.headall1{float: left;width: 100%;height: 50%;}.searchDiv{width: 100%;float: left;/* background-color:#F5F5F5; */}page{font-family: "Lucida Calligraphy", cursive, serif, sans-serif;/* background-color: #e7e6e1; e6e6e6*/}
</style>

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

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

相关文章

Python小设计

Python小设计

1. 五个PPT上的界面打印【print、input函数】 &#xff08;1&#xff09;英雄商城登陆界面 print(英雄联盟商城登录界面 ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~1. 用户登录2. 新用户注册3. 退出系统 ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~…
阅读更多...
【Numpy】基础学习：一文了解np.expand_dims的作用、用法

【Numpy】基础学习：一文了解np.expand_dims的作用、用法

【Numpy】基础学习&#xff1a;一文了解np.expand_dims的作用、用法 &#x1f308; 个人主页&#xff1a;高斯小哥 &#x1f525; 高质量专栏&#xff1a;Matplotlib之旅&#xff1a;零基础精通数据可视化、Python基础【高质量合集】、PyTorch零基础入门教程&#x1f448; 希望…
阅读更多...
MySQL用法---MySQL Workbench创建数据库和表

MySQL用法---MySQL Workbench创建数据库和表

1. 连接数据库 打开软件&#xff0c;点击左下角卡片&#xff0c;输入设置的数据库密码&#xff0c;勾选单选框 2. 了解主页面的组成部分 3. 创建数据库 先点击工具栏的创建按钮 再输入数据库名称 点击 Apply 创建 4. 创建数据表 展开数据库&#xff0c;在Tables上右键&…
阅读更多...
docker学习（十四）docker搭建私服

docker学习（十四）docker搭建私服

docker私服搭建&#xff0c;配置域名访问&#xff0c;设置访问密码 启动registry docker run -d \-p 5000:5000 \-v /opt/data/registry:/var/lib/registry \registrydocker pull hello-world docker tag hello-world 127.0.0.1:5000/hello-world docker push 127.0.0.1:5000…
阅读更多...
【2024-完整版】python爬虫 批量查询自己所有CSDN文章的质量分：附整个实现流程

【2024-完整版】python爬虫 批量查询自己所有CSDN文章的质量分：附整个实现流程

【2024】批量查询CSDN文章质量分 写在最前面一、分析获取步骤二、获取文章列表1. 前期准备2. 获取文章的接口3. 接口测试&#xff08;更新重点&#xff09; 三、查询质量分1. 前期准备2. 获取文章的接口3. 接口测试 四、python代码实现1. 分步实现2. 批量获取文章信息3. 从exce…
阅读更多...
WPF —— Calendar日历控件详解

WPF —— Calendar日历控件详解

1&#xff1a; Calendar的简介 日历控件用于创建可视日历&#xff0c;让用户选择日期并在选择日期时触发事件。 DisplayMode 用来调整日历显示模式&#xff0c;分为Month、Year 和Decade 三种。如下是None 2&#xff1a;Calendar控件常用的属性 SelectionMode 选中日历的类…
阅读更多...
深入理解指针——C语言

深入理解指针——C语言

目录 1. 内存和地址 2. 指针变量和地址 3. 指针变量类型的意义 4. const修饰指针 5. 指针运算 6. 野指针 7. assert断言 8. 指针的使用和传址调用 9. 数组名的理解 10. 使用指针访问数组 11. 一维数组传参的本质 12. 冒泡排序 13. 二级指针 14. 指针数组 15. 指…
阅读更多...
如何在Windows系统安装Node.js环境并制作html页面发布公网远程访问？

如何在Windows系统安装Node.js环境并制作html页面发布公网远程访问？

文章目录 前言1.安装Node.js环境2.创建node.js服务3. 访问node.js 服务4.内网穿透4.1 安装配置cpolar内网穿透4.2 创建隧道映射本地端口 5.固定公网地址 前言 Node.js 是能够在服务器端运行 JavaScript 的开放源代码、跨平台运行环境。Node.js 由 OpenJS Foundation&#xff0…
阅读更多...
创建一个Django项目

创建一个Django项目

安装python、pip、Django 找不到python命令&#xff0c;请将C:\Python33、C:\Python33\Lib、C:\Python33\libs三个地址加入环境变量。 get-pip.py下载&#xff1a;https://bootstrap.pypa.io/ django版本需要与python版本对应&#xff0c;并将C:\Python33\Scripts加入环境变…
阅读更多...
CNC机加工引入复合机器人可以提高生产效率，降低成本

CNC机加工引入复合机器人可以提高生产效率，降低成本

CNC加工企业在过去依赖大量的人工来完成生产线上的各项任务&#xff0c;包括CNC机床的上下料、物料搬运以及部分装配工作。然而&#xff0c;随着产能需求的不断增长和人工成本的持续上升&#xff0c;企业逐渐意识到自动化升级的重要性与迫切性。 面临的挑战与需求&#xff1a; …
阅读更多...
Layer1 新星 Partisia Blockchain 撑起隐私保护伞，助你无忧加密交易！

Layer1 新星 Partisia Blockchain 撑起隐私保护伞，助你无忧加密交易！

信息纷繁芜杂、真假掺半的 Web3 行业&#xff0c;如何才能更快、更安全地实现快速交易&#xff1f;Partisia Blockchain 或许交出了一份满意的技术答卷。致力于隐私保护、互操作性和可持续创新的 Layer1 区块链新星&#xff0c;Partisia Blockchain 以安全公平标榜&#xff0c;…
阅读更多...
VScode（Python）使用ssh远程开发（Linux系统树莓派）时，配置falke8和yapf总结避坑！最详细，一步到位！

VScode（Python）使用ssh远程开发（Linux系统树莓派）时，配置falke8和yapf总结避坑！最详细，一步到位！

写在前面&#xff1a;在Windows系统下使用VScode时可以很舒服的使用flake8和yapf&#xff0c;但是在ssh远程开发树莓派时&#xff0c;我却用不了&#xff0c;总是出现问题。当时我就开始了漫长的探索求知之路。中间也请教过许多大佬&#xff0c;但是他们就讲“能用不就行了&…
阅读更多...
Jeff Bezos的投资正开始见效

Jeff Bezos的投资正开始见效

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…
阅读更多...
Vue+wow.js+animate.css实现动画效果

Vue+wow.js+animate.css实现动画效果

1.介绍 Wow.js 是一个轻量级的 JavaScript 库&#xff0c;用于在网页滚动时实现动画效果。基于 CSS3 的动画库 Animate.css&#xff0c;并通过触发 CSS 动画类来创建各种引人注目的过渡和动画效果。 使用 Wow.js&#xff0c;可以很容易地为网页中的元素添加动画效果&#xff…
阅读更多...
MVC架构模式学习笔记(动力节点老杜2022)

MVC架构模式学习笔记(动力节点老杜2022)

GitHub代码笔记&#xff1a;laodu-mvc: 动力节点学习javaweb中的mvc笔记。 文章目录 1.视频链接 2.不使用MVC架构模式程序存在的缺陷 3.MVC架构模式理论基础 4.JavaEE设计模式-DAO模式 5.pojo & bean & domain 6.业务层抽取以及业务类实现 7.控制层 8.MVC架构模式与三…
阅读更多...
ElasticSearch之Nested对象

ElasticSearch之Nested对象

写在前面 本文看下es的nested嵌套对象相关内容。 1&#xff1a;es用了啥范式&#xff1f; 在关系型数据库中定义了6大数据库范式,即1&#xff0c;2&#xff0c;3&#xff0c;BC&#xff0c;4&#xff0c;5的NF&#xff08;normal form&#xff09;,分别如下&#xff1a; 1N…
阅读更多...
学习编程为什么选择C/C++，那么C++的强大之处到底体现在哪里呢？

学习编程为什么选择C/C++，那么C++的强大之处到底体现在哪里呢？

学习编程为什么选择C/C&#xff0c;那么C的强大之处到底体现在哪里呢&#xff1f; 在开始前我有一些资料&#xff0c;是我根据网友给的问题精心整理了一份「C的资料从专业入门到高级教程」&#xff0c; 点个关注在评论区回复“888”之后私信回复“888”&#xff0c;全部无偿共…
阅读更多...
ctf_show笔记篇（web入门---代码审计）

ctf_show笔记篇（web入门---代码审计）

301&#xff1a;多种方式进入 从index.php页面来看 只需要访问index.php时session[login]不为空就能访问 那么就在访问index.php的时候上传login 随机一个东西就能进去从checklogin页面来看sql注入没有任何过滤 直接联合绕过 密码随意 还有多种方式可以自己去看代码分析 30…
阅读更多...
力扣串题：字符串中的第二大数字

力扣串题：字符串中的第二大数字

此题的精妙之处在于char类型到int类型的转化&#xff0c;需要运算来解决 int secondHighest(char * s) {int max1-1;int max2-1;int szstrlen(s);int i 0 ;for(i0;i<sz;i){if(s[i]>0&&s[i]<9){if((s[i]-0)>max1){max2max1;max1s[i]-0;}else if((s[i]-0)&l…
阅读更多...
峟思仪器助力尾矿库安全监测

峟思仪器助力尾矿库安全监测

在矿业领域&#xff0c;尾矿库的安全监测是保障矿山持续、安全运营的关键环节。尾矿库通常用于存放矿山开采过程中产生的固体废物&#xff0c;如果管理不善&#xff0c;可能会造成重大的安全事故&#xff0c;对环境和人类健康造成严重威胁。因此&#xff0c;采用先进的监测技术…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023