微信小程序之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，一经查实，立即删除！

相关文章

Linux服务器，使用ssh登录时越来越慢，有时甚至出现超时的现象，解决方案

Linux服务器，使用ssh登录时越来越慢，有时甚至出现超时的现象，解决方案

一台Linux服务器&#xff0c;使用ssh登录时越来越慢&#xff0c;有时甚至出现超时的现象。一直以为这不算问题&#xff0c;但是有时候登录时间长的让人无法接受&#xff0c;查了一下&#xff0c;这“ssh登录慢”还真的是个问题&#xff0c;解决方案如下&#xff1a; 客户端进行…
阅读更多...
Python小设计

Python小设计

1. 五个PPT上的界面打印【print、input函数】 &#xff08;1&#xff09;英雄商城登陆界面 print(英雄联盟商城登录界面 ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~1. 用户登录2. 新用户注册3. 退出系统 ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~…
阅读更多...
Android UI: 自定义控件：可换行的布局控件

Android UI: 自定义控件：可换行的布局控件

文章目录 继承ViewGroup重写onMeasure方法&#xff1a;计算并设置布局控件的高度重写onLayout方法&#xff1a;计算并设置每个子控件的位置具体的代码实现小结 继承ViewGroup 重写generateLayoutParams&#xff0c;设置子控件的LayoutParams为MarginLayoutParams类型 Overridep…
阅读更多...
【Numpy】基础学习：一文了解np.expand_dims的作用、用法

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

【Numpy】基础学习&#xff1a;一文了解np.expand_dims的作用、用法 &#x1f308; 个人主页&#xff1a;高斯小哥 &#x1f525; 高质量专栏&#xff1a;Matplotlib之旅&#xff1a;零基础精通数据可视化、Python基础【高质量合集】、PyTorch零基础入门教程&#x1f448; 希望…
阅读更多...
c/c++的内存分配，详细说一下栈、堆和静态存储区

c/c++的内存分配，详细说一下栈、堆和静态存储区

栈区&#xff08;Stack&#xff09;&#xff1a;由编译器自动分配和回收&#xff0c;栈中存放函数调用的相关信息&#xff0c;栈帧&#xff08;记录函数的栈帧开始的位置&#xff09;&#xff0c;参数&#xff0c;局部变量&#xff0c;返回地址。其操作方法类似于数据结构中的栈…
阅读更多...
数组常用操作对照表——matlab和C++（vector）

数组常用操作对照表——matlab和C++（vector）

操作类别注释MatlabC创建创建一维数组常量v [1, 2, 3, 4, 5];std::vector<int> v {1, 2, 3, 4, 5 };创建全为0的一维数组v zeros(1, 3)std::vector<int> v(length);//初始化std::fill(v.begin(), v.end(), 0);创建全为1的一维数组v ones(1, 3);std::vector<…
阅读更多...
【python】使用代理IP爬取猫眼电影专业评分数据

【python】使用代理IP爬取猫眼电影专业评分数据

前言 我们为什么需要使用IP代理服务&#xff1f; 在编写爬虫程序的过程中&#xff0c;IP封锁无疑是一个常见且棘手的问题。尽管网络上存在大量的免费IP代理网站&#xff0c;但其质量往往参差不齐&#xff0c;令人堪忧。许多代理IP的延迟过高&#xff0c;严重影响了爬虫的工作…
阅读更多...
MySQL用法---MySQL Workbench创建数据库和表

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

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

RocketMq安装部署（centos）

1、下载 官网下载地址&#xff1a;https://rocketmq.apache.org/zh/docs/quickStart/01quickstart/ 下载二进制包 2、上传 上传rocketmq-all-5.2.0-bin-release.zip至/home/rocketmq 解压缩&#xff1a; unzip rocketmq-all-5.2.0-bin-release.zip3、配置 broker.conf&…
阅读更多...
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. 指…
阅读更多...
齐次变换矩阵

齐次变换矩阵

文章目录 平移的齐次变换矩阵旋转的齐次变换矩阵旋转矩阵的转置与逆齐次变换矩阵的逆旋转变换通式参考文献平移的齐次变换矩阵 T r a n s ( Δ x , Δ y , Δ z ) = [ 1 0 0 Δ x 0 1 0 Δ y 0 0 1 Δ z 0 0 0 1 ] \mathrm{Trans}(\Delta x,\Delta y,\Delta z)=\begin{bmatrix}…
阅读更多...
如何在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加入环境变…
阅读更多...
「AI人工智能」NodeJs使用openai流式请求与非流式请求

「AI人工智能」NodeJs使用openai流式请求与非流式请求

文章目录 前言一、非流式请求 1.1 无上下文模式1.2 上下文模式二、流式请求 前言 NodeJs使用openai流式请求与非流式请求 一、非流式请求 一次性返回所有数据&#xff0c;请求时间较久&#xff0c;兼容性好。 1.1 无上下文模式 router.post("/openai", async (r…
阅读更多...
算法训练day42leetcode01背包问题 416. 分割等和子集

算法训练day42leetcode01背包问题 416. 分割等和子集

01 背包 题目描述 有n件物品和一个最多能背重量为w 的背包。第i件物品的重量是weight[i]&#xff0c;得到的价值是value[i] 。每件物品只能用一次&#xff0c;求解将哪些物品装入背包里物品价值总和最大。 题目分析 每一件物品其实只有两个状态&#xff0c;取或者不取&…
阅读更多...
CNC机加工引入复合机器人可以提高生产效率，降低成本

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

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

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

信息纷繁芜杂、真假掺半的 Web3 行业&#xff0c;如何才能更快、更安全地实现快速交易&#xff1f;Partisia Blockchain 或许交出了一份满意的技术答卷。致力于隐私保护、互操作性和可持续创新的 Layer1 区块链新星&#xff0c;Partisia Blockchain 以安全公平标榜&#xff0c;…
阅读更多...
最新文章

Copyright @ 2022~2023