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

news/2024/7/27 8:54:16/文章来源:https://blog.csdn.net/qq_39772439/article/details/136669767

效果图如下；

上代码

<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.luyixian.cn/news_show_1006621.aspx

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

相关文章

Address already in dse_JVM_Bind。端口莫名被占用【占用8080端口！！！】

Address already in dse_JVM_Bind。端口莫名被占用【占用8080端口！！！】

文章目录 问题描述&#xff1a;Address already in dse:JVM_Bind问题可能的原因解决方案 问题描述&#xff1a;Address already in dse:JVM_Bind 问题可能的原因 当前端口已经有别的程序在占用着 我曾经被QQ占用过8080端口&#xff0c;Oracle启动了OracleHttp服务会占用8080端…
阅读更多...
接口自动化框架(Pytest+request+Allure)

接口自动化框架(Pytest+request+Allure)

前言&#xff1a; 接口自动化是指模拟程序接口层面的自动化&#xff0c;由于接口不易变更&#xff0c;维护成本更小&#xff0c;所以深受各大公司的喜爱。 接口自动化包含2个部分&#xff0c;功能性的接口自动化测试和并发接口自动化测试。 本次文章着重介绍第一种&#xff0c…
阅读更多...
InstantID Zero-shot Identity-Preserving Generation in Seconds

InstantID Zero-shot Identity-Preserving Generation in Seconds

InstantID: Zero-shot Identity-Preserving Generation in Seconds TL; DR&#xff1a;InstantID IP-Adapter (Face) ControlNet&#xff0c;实现了具有较高保真度的人脸 ID 生成。 方法 InstantID 想做到的事情是&#xff1a;给定一张参考人脸 ID 图片&#xff0c;生成该…
阅读更多...
*地宫取宝c++

*地宫取宝c++

题目 输入样例1&#xff1a; 2 2 2 1 2 2 1输出样例1&#xff1a; 2输入样例2&#xff1a; 2 3 2 1 2 3 2 1 5输出样例2&#xff1a; 14 思路 题目说从入口开始&#xff0c;只能向右或向下行走到达右下角&#xff0c;类似“摘花生”这道题的模型。题目又说只有当格子里的宝…
阅读更多...
C语言中如何进行内存管理

C语言中如何进行内存管理

主页&#xff1a;17_Kevin-CSDN博客 收录专栏&#xff1a;《C语言》 C语言是一种强大而灵活的编程语言&#xff0c;但与其他高级语言不同&#xff0c;它要求程序员自己负责内存的管理。正确的内存管理对于程序的性能和稳定性至关重要。 一、引言 C 语言是一门广泛使用的编程语…
阅读更多...
Flink概述

Flink概述

1.什么是Flink 是一个框架和分布式处理引擎&#xff0c;用于对无界和有界数据流进行有状态计算。 官网&#xff1a;Flink 2.Flink的发展历史 Flink起源于一个叫作Stratosphere的项目&#xff0c;它是由3所地处柏林的大学和欧洲其他一些大学在2010~2014年共同进行的研究项目&a…
阅读更多...
关于playbook中when条件过滤报The conditional check ‘result|failed‘ failed的问题

关于playbook中when条件过滤报The conditional check ‘result|failed‘ failed的问题

问题现象 在使用plabook中的when做过滤脚本如下&#xff1a; --- - hosts: realserversremote_user: roottasks:- name: Check if httpd service is runningcommand: systemctl status httpdregister: resultignore_errors: True- name: Handle failed service checkdebug:ms…
阅读更多...
C#调用Halcon出现尝试读取或写入受保护的内存,这通常指示其他内存已损坏。System.AccessViolationException

C#调用Halcon出现尝试读取或写入受保护的内存,这通常指示其他内存已损坏。System.AccessViolationException

一、现象 在C#中调用Halcon&#xff0c;出现异常提示&#xff1a;尝试读取或写入受保护的内存,这通常指示其他内存已损坏。System.AccessViolationException 二、原因 多个线程同时访问Halcon中的某个公共变量&#xff0c;导致程序报错 三、测试 3.1 Halcon代码 其中tsp_width…
阅读更多...
sqllab第四关通关笔记

sqllab第四关通关笔记

知识点&#xff1a; 判断注入点类型判断原始语句 select 1,2,3 from 表名 where id("输入") limit 0,1; 首先判断注入类型 构造id1/0 正常打印&#xff1b;字符型注入 构造id1 正常回显&#xff1b;说明不是用单引号读取输入内容 构造id1" 发生异常&#x…
阅读更多...
Win11系统启动VMware上虚拟机蓝屏解决办法

Win11系统启动VMware上虚拟机蓝屏解决办法

背景 最近有在做一个项目的过程中需要使用虚拟机&#xff0c;用原来装好的的Vmware14打开虚拟机&#xff0c;直接蓝屏了&#xff0c;尝试了如下几种方法来解决&#xff0c;最好用的就是第二种&#xff0c;直接下载最新版本(在软件管家中直接下载)。 虚拟机 目前常用的虚拟机软…
阅读更多...
初步了解序列化和反序列化

初步了解序列化和反序列化

01什么是序列化和反序列化 序列化是将对象转化为字符串以便存储的一种方式。而反序列化恰好是序列化的逆过程&#xff0c;反序列化会将字符串转化为对象供程序使用。 常见的php系列化和反系列化方式主要有&#xff1a;serialize&#xff0c;unserialize&#xff1b;json_enco…
阅读更多...
Nginx请求转发和Rewrite的URL重写及重定向的功能实现移动端和PC端前端服务转发和重定向配置。

Nginx请求转发和Rewrite的URL重写及重定向的功能实现移动端和PC端前端服务转发和重定向配置。

应用场景说明一 应用系统分pc端和微信小程序&#xff0c;移动端和pc端分别申请二级子域名&#xff0c;通过Nginx域名解析匹配&#xff0c;将web访问统一转发至对应的域名请求中。部分配置如下所示&#xff1a; 1、WEB访问统一入口域名解析转发配置&#xff0c;PC端和移动端根域…
阅读更多...
【论文阅读】OpsEval

【论文阅读】OpsEval

粗糙翻译&#xff0c;如有兴趣请看原文&#xff0c;链接&#xff1a;https://arxiv.org/abs/2310.07637 摘要 信息技术&#xff08;IT&#xff09;运营&#xff08;Ops&#xff09;&#xff0c;特别是用于IT运营的人工智能&#xff08;AlOps&#xff09;&#xff0c;是保持现…
阅读更多...
码头船只出行和货柜管理系统的设计与实现

码头船只出行和货柜管理系统的设计与实现

针对于码头船只货柜信息管理方面的不规范&#xff0c;容错率低&#xff0c;管理人员处理数据费工费时&#xff0c;采用新开发的码头船只货柜管理系统可以从根源上规范整个数据处理流程。 码头船只货柜管理系统能够实现货柜管理&#xff0c;路线管理&#xff0c;新闻管理&#…
阅读更多...
Java中常见延时队列的实现方案总结

Java中常见延时队列的实现方案总结

&#x1f3f7;️个人主页&#xff1a;牵着猫散步的鼠鼠 &#x1f3f7;️系列专栏&#xff1a;Java全栈-专栏 &#x1f3f7;️个人学习笔记&#xff0c;若有缺误&#xff0c;欢迎评论区指正 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&…
阅读更多...
爬虫与DataFrame对象小小结合

爬虫与DataFrame对象小小结合

import pandas as pd import requests from lxml import etree #数据请求 url"https://www.maigoo.com/brand/list_1715.html" headers{User-Agent:} #数据响应 resrequests.get(url,headersheaders) tree etree.HTML(res.text) #数据解析 titletree.xpath(.//div[c…
阅读更多...
C语言游戏实战（4）：人生重开模拟器

C语言游戏实战（4）：人生重开模拟器

前言&#xff1a; 人生重开模拟器是前段时间非常火的一个小游戏&#xff0c;接下来我们将一起学习使用c语言写一个简易版的人生重开模拟器。 网页版游戏&#xff1a; 人生重开模拟器 (ytecn.com) 1.实现一个简化版的人生重开模拟器 &#xff08;1&#xff09; 游戏开始的时…
阅读更多...
Express学习（四）

Express学习（四）

使用Express写接口 创建基本的服务器 创建API路由模块 编写GET接口 编写POST接口 CORS跨域资源共享 什么是CORS CORS由一系列HTTP响应头组成&#xff0c;这些HTTP响应头决定浏览器是否阻止前端JS代码跨域获取资源。浏览器的同源安全策略默认会阻止网页“跨域”获取资源。但如…
阅读更多...
系统运维网络知识汇总

系统运维网络知识汇总

一、系统运维中网络方面的规划与思考 系统运维建立在网络的基础之上&#xff0c;如果没有一个相对合理的网络架构&#xff0c;恐怕系统运维做起来也不是那么的顺手。一个公司基本上都会把网络和服务器独立开来&#xff0c;划分不同的区域摆放设备&#xff0c;很多时候都是物理…
阅读更多...
使用Java自带的VisualVM监控远程服务器部署在Docker容器中的Java项目并使用Mat在线工具排查服务器内存泄露或内存溢出的原因

使用Java自带的VisualVM监控远程服务器部署在Docker容器中的Java项目并使用Mat在线工具排查服务器内存泄露或内存溢出的原因

事情是这样的&#xff0c;我们项目最近应业主的要求迁移到了新的服务器&#xff0c;起初一切正常&#xff0c;部署、上线、测试都没有问题&#xff0c;项目大概运行了一周的工作日时间都没出现问题&#xff0c;直到周六那天&#xff0c;项目经理打电话过来说服务器崩了&#xf…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站 广利置业