uView实现全屏选项卡

news2024/12/23 16:10:45

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

<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.coloradmin.cn/o/982635.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

录音工具哪个好用?亲身测评,推荐这几个

“电脑录音用什么工具呀&#xff0c;前几天录制的视频声音没有录进去&#xff0c;现在需要重新补录声音&#xff0c;但是找不到合适的录音工具&#xff0c;就想问问大家&#xff0c;有没有好用的录音工具推荐呀&#xff1f;” 现如今&#xff0c;录音工具在我们的生活和工作中…

ant-table组件表格数据做合计行,并固定在表格底部

需求描述 某些时候&#xff0c;我们表格展示数值型数据的时候&#xff0c;可能会想做一个合计处理&#xff0c;这样能直观的了解到当前列的总计数据信息。 遍观Table组件&#xff0c;官方是没有提供这个功能的&#xff0c;这就需要我们自己处理了 需求分析 根据表格的特性&a…

链表逆置题

本题要求实现一个函数&#xff0c;将给定单向链表逆置&#xff0c;即表头置为表尾&#xff0c;表尾置为表头。链表结点定义如下&#xff1a; struct ListNode { int data; struct ListNode *next; }; 函数接口定义&#xff1a; struct ListNode *reverse( struct ListNode *hea…

TOWE雷达光敏感应开关,让生活更智能、更安全

现代生活中&#xff0c;智能家居成为人们追求品质生活的必备之选。其中&#xff0c;照明控制的智能化已然成为一种趋势&#xff0c;传统的灯光开关需要人们手动操作&#xff0c;既不方便&#xff0c;有时候也会造成资源的过度浪费&#xff0c;而雷达光敏感应开关的出现&#xf…

数据库中了malloxx勒索病毒了怎么办?勒索病毒解密

Malloxx是一种新兴的勒索病毒&#xff0c;它通常通过攻击计算机系统中的文件和数据来进行恶意加密和锁定。这种病毒已经引起了广泛的关注&#xff0c;因为它采用了先进的技术手段和策略&#xff0c;使得受害者很难自行解决问题。 Malloxx勒索病毒的攻击方式非常狡猾&#xff0c…

ClickHouse进阶(十):Clickhouse数据查询-4

进入正文前&#xff0c;感谢宝子们订阅专题、点赞、评论、收藏&#xff01;关注IT贫道&#xff0c;获取高质量博客内容&#xff01; &#x1f3e1;个人主页&#xff1a;含各种IT体系技术,IT贫道_Apache Doris,大数据OLAP体系技术栈,Kerberos安全认证-CSDN博客 &#x1f4cc;订阅…

振弦采集仪应用地铁隧道安全监测详细解决方案

振弦采集仪应用地铁隧道安全监测详细解决方案 随着城市化进程的不断加快&#xff0c;地铁作为一种高效、便捷、环保的交通方式已经成为现代城市不可或缺的一部分。因此&#xff0c;对地铁的安全性也越来越重视&#xff0c;一般二三线以上的城市在不断发展中&#xff0c;地铁做…

Nginx 部署离线瓦片服务

nginx 部署离线瓦片服务&#xff0c;地图资源加载 一、下载离线瓦片数据&#xff0c;部署在本地二、nginx.conf 配置文件三、浏览器中访问 上一篇&#xff1a; nginx 安装与部署 一、下载离线瓦片数据&#xff0c;部署在本地 二、nginx.conf 配置文件 #user nobody; worker_…

从C语言到C++_38(C++的IO流+空间适配器)STL六大组件联系

目录 1. C语言的输入和输出和流 2. C的IO流 2.1 C标准IO流 2.2 C文件IO流 2.3 stringstream&#xff08;字符流&#xff09; 3. 空间配置器&#xff08;了解&#xff09; 3.1 一级空间适配器 3.2 二级空间配置器 3.3 二级空间适配器的空间申请 3.4 二级空间配置器的空…

企业架构LNMP学习笔记16

基于IP的访问控制&#xff1a; 基于ngx_http_access_module模块&#xff0c;默认可使用。 语法是&#xff1a; deny ip 禁止IP访问 allow ip 允许IP访问 上面是允许的&#xff0c;下面是deny的。 老师建议写在server段中是比较合适的。 基于用户的访问控制&#xff1a; …

UG\NX二次开发 获取基准平面的点和方向 UF_MODL_ask_datum_plane

文章作者:里海 来源网站:王牌飞行员_里海_里海NX二次开发3000例,里海BlockUI专栏,C\C++-CSDN博客 简介: UG\NX二次开发 获取基准平面的点和方向 UF_MODL_ask_datum_plane 效果: 代码: #include "me.hpp"void ufusr(char* param, int* retcode, int par…

HarmonyOS实现几种常见图片点击效果

一. 样例介绍 HarmonyOS提供了常用的图片、图片帧动画播放器组件&#xff0c;开发者可以根据实际场景和开发需求&#xff0c;实现不同的界面交互效果&#xff0c;包括&#xff1a;点击阴影效果、点击切换状态、点击动画效果、点击切换动效。 相关概念 image组件&#xff1a;图片…

如何免费获取CDH集群技术支持

CDH拥有全球70% 的Hadoop用户&#xff0c;在国内也拥有庞大的用户群体。由于Cloudera 和Hortonworks 合并后厂商政策调整&#xff0c;不再更新、不再免费、不再提供服务&#xff0c;众多企业用户生产集群面临着进退两难的窘境和未知的技术风险。 社区版不再更新。Cloudera所有…

如何获取第三方maven依赖信息?

依赖信息查询方式&#xff1a; 1. maven仓库信息官网 https://mvnrepository.com/ 2. mavensearch插件搜索 1. maven仓库信息官网 https://mvnrepository.com/ 访问可能会比较慢 搜索你想要查找的依赖 点击你想要查找的依赖 打开是这个界面&#xff0c;点击对应版…

简单介绍下主数据管理(MDM)工具的发展趋势

主数据管理工具帮助组织管理内部和外部主数据&#xff0c;提升主数据管理的效率。主数据管理工具多种多样&#xff0c;打孔卡、纸质文件记录、目录卡片、数据库、应用系统&#xff0c;以及专业的主数据管理平台&#xff0c;都属于主数据管理工具。 随着主数据管理要求的不断变化…

指针和字符数组笔试题及其解析(第三组)

个人主页&#xff1a;Lei宝啊 愿所有美好如期而遇 第三组笔试题 char *p "abcdef";printf("%d\n", sizeof(p)); printf("%d\n", sizeof(p1)); printf("%d\n", sizeof(*p)); printf("%d\n", sizeof(p[0])); printf("%…

MATLAB基础-MAT文件的读写操作

简介 MAT文件是MATLAB格式的双精度二进制数据文件&#xff0c;由MATLAB软件创建&#xff0c;可以使用MATLAB软件再其他计算机上以其他浮点格式读取&#xff0c;同时也可以使用其他软件通过MATLAB的应用程序接口来进行读写操作。如果只是再MATLAB环境中处理数据&#xff0c;使用…

基于nginx+keepalived的负载均衡、高可用web集群

目录 基于nginxkeepalived的负载均衡、高可用web集群关闭所有机器的相关服务一、按照IP规划配置好静态IP。二、建立免密通道&#xff0c;使用Ansible自动化批量部署软件环境1、安装配置ansible2、编写主机清单3、在ansible上生成密钥对&#xff0c;并将公钥复制到其他主机上4、…