uView实现全屏选项卡

// 直接复制粘贴即可使用

<template><view><view class="tabsBox"><u-tabs-swiper ref="uTabs" :list="list":current="current"@change="tabsChange":is-scroll="false"></u-tabs-swiper></view><view><swiper class="swiperBox" :current="swiperCurrent" @transition="transition"@animationfinish="animationFinish"><swiper-item class="swiperBox-item"><scroll-view scroll-y @scrolltolower="onReachBottom">反馈信息</scroll-view></swiper-item><swiper-item class="swiperBox-item"><scroll-view scroll-y @scrolltolower="onReachBottom">基础信息</scroll-view></swiper-item></swiper></view><view class="bottomBox"><view class="bottomBox-icon"><view @click="rejectIt(1)" class="bottomBox-icon-iconBox"><u-icon name="yidongcaozuo-bohui" custom-prefix="custom-icon" color="#1F1F1F"></u-icon><view> 驳回</view></view></view><view class="bottomBox-box"><view class="none" @click='goBack'>取消</view><view class="sure" @click="rejectIt(2)">反馈</view></view></view></view>
</template><script>export default {name: "disposalConfirmationDetail",components: {// feedbackInfo: () => import("./feedbackInfo"),// basicInfo: () => import("./basicInfo"),},data() {return {list: [{name: '反馈信息'}, {name: '基础信息'}],current: 0,swiperCurrent: 0,id: null,};},methods: {tabsChange(index) {this.swiperCurrent = index;},transition(e) {let dx = e.detail.dx;this.$refs.uTabs.setDx(dx);},animationFinish(e) {let current = e.detail.current;this.$refs.uTabs.setFinishCurrent(current);this.swiperCurrent = current;this.current = current;},onReachBottom() {},rejectIt(flag) {console.log(flag)},goBack() {uni.navigateBack({delta: 1,})},},onLoad(option) {this.id = option.id},};
</script><style lang="scss" scoped>.tabsBox {height: 44px;}.swiperBox {height: calc(100vh - var(--window-top) - var(--window-bottom) - 96px - 44px - 2px);/*border: 1px solid red;*/&-item {height: 100%;width: 100vw;}}.bottomBox {width: 100%;position: absolute;bottom: 0px;height: 96px;z-index: 999;background: #FFFFFF;box-shadow: inset 0px 1px 0px 0px rgba(25, 31, 37, 0.12);/*border: 2px solid red;*/display: flex;justify-content: space-between;&-icon {width: 55%;display: flex;justify-content: space-between;align-items: center;padding: 10rpx 60rpx 0;&-iconBox {display: flex;flex-direction: column;align-items: center;font-size: 28rpx;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: #1F1F1F;height: 44px;.u-icon {font-size: 40rpx;margin-bottom: 12rpx;}}}&-box {margin-top: 8px;display: flex;align-items: center;padding: 0 32rpx;flex: 1;view {width: 50%;height: 44px;border-radius: 4px;border: 1px solid rgba(31, 31, 31, 0.1);display: flex;justify-content: center;align-items: center;font-size: 34rpx;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;}.none {color: #1F1F1F;margin-right: 16rpx;}.none:active {background: rgba(31, 31, 31, 0.17);}.sure {background: #3296FA;color: #FFFFFF;}.sure:active {background: rgba(32, 116, 212, 1);}}}</style>

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

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

相关文章

在VR全景中嵌入3D模型有哪些优势?

现阶段&#xff0c;很多商企都会引入VR全景展示来宣传推广自己的产品、服务以及环境&#xff0c;但是环境展示凸显的沉浸式体验只是 VR全景一部分的价值所在&#xff0c;商企使用VR全景还有一个优势就是互动性&#xff0c;通过丰富多样的互动性&#xff0c;让用户同VR场景中的物…

vscode html使用less和快速获取标签less结构

扩展插件里面搜索 css tree 插件 下载 使用方法 选择你要生成的标签结构然后按CTRLshiftp 第一次需要在输入框输入 get 然后选择 Generate CSS tree less结构就出现在这个里面直接复制到自己的less文件里面就可以使用了 在html里面使用less 下载 Easy LESS 插件 自己创建…

spring---第一篇

系列文章目录 文章目录 系列文章目录一、如何实现一个IOC容器二、spring是什么?一、如何实现一个IOC容器 1、配置文件配置包扫描路径 2、递归包扫描获取.class文件 3、反射、确定需要交给IOC管理的类 4、对需要注入的类进行依赖注入 配置文件中指定需要扫描的包路径 定义一些…

Android之 SVG绘制

一 SVG介绍 1.1 SVG&#xff08;Scalable Vector Graphics&#xff09;是可缩放矢量图形的缩写&#xff0c;它是一种图形格式&#xff0c;其中形状在XML中指定&#xff0c; 而XML又由SVG查看器呈现。 1.2 SVG可以区别于位图&#xff0c;放大可以做到不模糊&#xff0c;可以做…

【实战】React17+React Hook+TS4 最佳实践,仿 Jira 企业级项目(总结展望篇)

文章目录 一、项目起航&#xff1a;项目初始化与配置二、React 与 Hook 应用&#xff1a;实现项目列表三、TS 应用&#xff1a;JS神助攻 - 强类型四、JWT、用户认证与异步请求五、CSS 其实很简单 - 用 CSS-in-JS 添加样式六、用户体验优化 - 加载中和错误状态处理七、Hook&…

springboot 集成dubbo

上一篇我们一起认识了Dubbo与RPC&#xff0c;今天我们就来一起学习如何使用Dubbo&#xff0c;并将Dubbo集成到Spring Boot的项目中。我们来看下今天要使用到的软件及版本&#xff1a; 软件 版本 说明 Java 11 Spring Boot 2.7.13 Spring Boot 3.0版本开始&#xff0c;最…

【C#】泛型

【C#】泛型 泛型是什么 泛型是将类型作为参数传递给类、结构、接口和方法&#xff0c;这些参数相当于类型占位符。当我们定义类或方法时使用占位符代替变量类型&#xff0c;真正使用时再具体指定数据类型&#xff0c;以此来达到代码重用目的。 泛型特点 提高代码重用性一定…

去掉Egde浏览器选择文本弹出的搜索小按钮

去掉Egde浏览器选择文本弹出的搜索小按钮 小按钮 去掉&#xff1a;在设置中找到选择文本时的微型菜单&#xff0c;关闭【选择文本时显示迷你菜单】选项

Java LinkedList

简介 链表&#xff08;Linked list&#xff09;是一种常见的基础数据结构&#xff0c;是一种线性表&#xff0c;但是并不会按线性的顺序存储数据&#xff0c;而是在每一个节点里存到下一个节点的地址。 链表可分为单向链表和双向链表。 在Java程序设计语言中&#xff0c;所有…

JVM中JAVA对象和数组内存布局

对象 数组 在Java中&#xff0c;所有的对象都是一种特殊的数组&#xff0c;它们的元素可以是基本数据类型、其他对象引用或者其他任何类型。Java对象和数组的内存布局包含以下部分&#xff1a; 1.对象头&#xff08;Object Header&#xff09; 每个Java对象都有一个对象头&am…

软件提示vcruntime140_1.dll丢失的解决方法,以及丢失的原因总结

在运行某些程序时&#xff0c;可能会出现“vcruntime140_1.dll 丢失”的错误提示。这是因为 vcruntime140_1.dll 是 Visual C Redistributable 的一部分&#xff0c;它通常被安装在 Windows 操作系统上。如果该文件丢失或无法找到&#xff0c;可能会导致程序无法正常运行。在我…

LLMs之Baichuan 2:《Baichuan 2: Open Large-scale Language Models》翻译与解读

LLMs之Baichuan 2&#xff1a;《Baichuan 2: Open Large-scale Language Models》翻译与解读 导读&#xff1a;2023年9月6日&#xff0c;百川智能重磅发布Baichuan 2。科技论文主要介绍了Baichuan 2&#xff0c;一个开源的大规模语言模型&#xff0c;以及其在多个领域的性能表现…

js案例:选字游戏

目录 效果预览图 游戏规则 整体思路 完整代码 html部分 js部分 效果预览图 游戏规则 1.游戏时间为30s&#xff0c;30s倒计时结束弹出游戏结束和对应的游戏分数。 2.根据中间大字的颜色&#xff0c;点击下面对应的文字。 大字的颜色 点击的文字&#xff08;列如&#…

聊聊Http服务化改造实践

在微服务架构体系中远程RPC调用主要包括Dubbo与Http调用两个大类&#xff0c;由于Dubbo拥有服务注册中心&#xff0c;并且起服务的命名非常规范&#xff0c;使用包名.类名.方法名进行描述。 而http调用通常都是使用httpclient等相关类库&#xff0c;这些在使用上并没有问题&am…

PlantUML入门教程:画时序图

软件工程中会用到各种UML图&#xff0c;例如用例图、时序图等。那我们能不能像写代码一样去画图呢&#xff1f; 今天推荐一款软件工程师的作图利器--PlantUML&#xff0c;它能让你用写代码的方式快速画出UML图。 一、什么是PlantUML&#xff1f; PlantUML是一个允许你快速作出…

【Java】线程都有哪几种状态

文章目录 前言传统线程模型&#xff08;操作系统&#xff09;中线程状态Java线程中的状态线程的运行流程 前言 首先我们要知道&#xff0c;在传统&#xff08;操作系统&#xff09;的线程模型中线程被分为五种状态&#xff0c;在java线程中&#xff0c;线程被分为六种状态。 …

X86_64函数调用汇编程序分析

X86_64函数调用汇编程序分析 1 X86_64寄存器使用标准2 对应代码的分析2.1 main函数及其对应的汇编程序2.1.1 main的C代码实现2.1.2 main函数对应汇编及其分析2.1.3 执行完成之后栈的存放情况 2.2 test_fun_a函数及其对应的汇编程序2.2.1 test_fun_a函数的C实现2.2.2 test_fun_a…

(源码版)2023 年高教社杯全国大学生数学建模竞赛-E 题 黄河水沙监测题一数据分析详解+Python代码

十分激动啊啊啊题目终于出来了&#xff01;&#xff01;官网6点就进去了结果直接卡死现在才拿到题目&#xff0c;我是打算A-E题全部做一遍。简单介绍一下我自己&#xff1a;博主专注建模四年&#xff0c;参与过大大小小数十来次数学建模&#xff0c;理解各类模型原理以及每种模…

容器编排学习(五)卷的概述与存储卷管理

一 卷 1 容器化带来的问题 容器中的文件在磁盘上是临时存放的&#xff0c;这给容器中运行的重要的应用程序带来一些问题 问题1&#xff1a;当容器崩溃或重启的时候&#xff0c;kubelet 会以干净的状态(镜像的状态)重启容器&#xff0c;容器内的历史数据会丢失 问题2&…