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.hqwc.cn/news/102025.html

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

相关文章

【高危】Apache Airflow Spark Provider 反序列化漏洞 (CVE-2023-40195)

zhi.oscs1024.com​​​​​ 漏洞类型反序列化发现时间2023-08-29漏洞等级高危MPS编号MPS-qkdx-17bcCVE编号CVE-2023-40195漏洞影响广度广 漏洞危害 OSCS 描述Apache Airflow Spark Provider是Apache Airflow项目的一个插件&#xff0c;用于在Airflow中管理和调度Apache Spar…

stm32之30.DMA

DMA&#xff08;硬件加速方法&#xff09;一般用于帮运比较大的数据&#xff08;如&#xff1a;摄像头数据图像传输&#xff09;&#xff0c;寄存器-》DMA-》RAM 或者 RAM-》DMA-》寄存器提高CPU的工作效率 源码-- #include "myhead.h" #include "adc.h"#…

【LeetCode - 每日一题】2594. 修车的最少时间(23.09.07)

2594. 修车的最少时间 题意 给定每个师傅修车的时间和需要修的车辆总数&#xff0c;计算修理所有汽车需要的最少时间。师傅可以同时修车。 解法 二分 看到题目没有任何头绪&#xff0c;直接查看题解。 至于为什么用二分做呢&#xff0c;讨论区有个友友这么说到&#xff1a…

Web安全——穷举爆破下篇(仅供学习)

Web安全 一、常见的端口服务穷举1、hydra 密码穷举工具的使用2、使用 hydra 穷举 ssh 服务3、使用 hydra 穷举 ftp 服务4、使用 hydra 穷举 mysql 服务5、使用 hydra 穷举 smb 服务6、使用 hydra 穷举 http 服务7、使用 hydra 穷举 pop3 服务8、使用 hydra 穷举 rdp 服务9、使用…

异常的顶级理解

目录 1.异常的概念与体系结构 1.1异常的体系结构 1.2异常的举例 1.3错误的举例 2.异常的分类 2.1编译时异常 2.2运行时异常 3.异常的处理 3.1异常的抛出throw 3.2try-catch捕获并处理 3.3finally 3.4 异常声明throws 4.自定义异常类 1.异常的概念与体系结构 1.1异常的…

华为三层交换机与路由器对接上网

华为三层交换机与路由器对接上网

Win7旗舰版64位桌面创建32位IE方法

很多Win7 64位旗舰版用户系统桌面上的IE8浏览器&#xff0c;打开后都是64位的&#xff0c;而很多网站并不兼容64位的IE浏览器&#xff0c;其实在Win764位系统中IE是分为64位和32位的&#xff0c;出现这样的情况可能是桌面上的IE图标指响的是64位的IE&#xff0c;我们只要重新添…

Ae 效果:CC Cross Blur

模糊和锐化/CC Cross Blur Blur & Sharpen/CC Cross Blur CC Cross Blur&#xff08;CC 交叉模糊&#xff09;可以通过单独控制水平和垂直方向的模糊程度来创建独特的交叉模糊效果&#xff0c;可以产生类似光线交错的视觉外观。 ◆ ◆ ◆ 效果属性说明 Radius X 半径 X 用…

win10系统启用win32长路径

Step1、在系统开始 输入框中输入: gpedit.msc&#xff0c;然后回车键。 Step2、在本地计算机 策略中&#xff0c;选择: 计算机配置 -> 管理模板 Step3、然后选择: 系统 -> 文件系统 Step4、窗口中上靠右侧有 启用Win32长路径&#xff0c;如下图: Step5、双击 启用Win…

【免费模板】2023数学建模国赛word+latex模板免费分享

无需转发 免费获取2023国赛模板&#xff0c;获取方式见文末 模板文件预览如下&#xff1a; 模板参考格式如下&#xff1a; &#xff08;题目&#xff09;XXXXXX 摘 要&#xff1a; 开头段&#xff1a;需要充分概括论文内容&#xff0c;一般两到三句话即可&#xff0c;长度控…

Kubernetes之舞:微服务的交响乐团

Kubernetes与微服务&#xff1a;缘起 微服务的崛起 微服务架构已经成为现代软件开发的标准。与传统的单体应用相比&#xff0c;微服务提供了更高的模块化&#xff0c;使得团队可以独立地开发、部署和扩展各个服务。这种架构模式的主要优势在于其灵活性和可扩展性&#xff0c;允…

【牛客刷题】bfs和dfs (二叉树层序遍历、矩阵最长递增路径、被围绕的区域)

二叉树层序遍历 vector<vector<int> > levelOrder(TreeNode* root) {// write code herevector<int> res;vector<vector<int>> result;if (root nullptr) return result;queue<TreeNode*> que;que.push(root);while (!que.empty()) {int …