当前位置: 首页 > news >正文

uniapp android底部弹框

uniapp android底部弹框,带有动画效果

在这里插入图片描述
在这里插入图片描述

    <view class="popup_box"><view class="bottom_more" @click="handleClickCancel"><image src="@/static/images/rescue/icon_more.png"></image></view><view class="popup_content" :class="[show?'drawer_container_show':'']"><subtitle title='联系人' isMore='true' navigatorUrl='/pages/communication/address_list'></subtitle><view class="detail_info"><view class="right_line"></view><view class="lineone"><view class="detail_name">陈峰山</view><view class="detail_job">新林林业局·值班员</view></view><view class="detail_tel">电话: 13945706180</view><!-- <image :src="require('@/static/images/index/phone.png')" class="phone_img" @click="callPhone"></image> --></view></view></view>
//安卓拨打电话,需要授权通讯录等callPhone(phone) {if (phone) {plus.device.dial(phone, true);}},
  .popup_box {position: fixed;bottom: 0px;z-index: 400;width: 100%;.bottom_more {margin: 0 auto;width: 60rpx;height: 60rpx;display: flex;align-items: center;image {width: 60rpx;height: 20rpx;display: block;}}.popup_content {width: 100%;background-color: #fff;border-radius: 20rpx 20rpx 0 0;box-sizing: border-box;height: 0;transform: translate3d(0, 100%, 0);transform-origin: center;transition: all 0.3s ease-in-out;background: #fff;.detail_info {position: relative;box-sizing: border-box;// border: 2rpx solid rgb(226, 226, 226);background-color: rgba(240, 242, 241, 1);padding: 32rpx;border-radius: 20rpx;.right_line {position: absolute;left: 0;top: 36rpx;width: 6rpx;height: 38rpx;border-radius: 0 4rpx 4rpx 0;background: rgb(39, 167, 92);}.lineone {display: flex;align-items: center;padding-bottom: 22rpx;.detail_name {font-size: 36rpx;font-weight: 700;color: rgb(51, 54, 52);padding-right: 18rpx;}}.detail_tel,.detail_job {font-size: 28rpx;font-weight: 400;color: rgb(87, 89, 88);}.phone_img {position: absolute;right: 10rpx;top: 50%;transform: translate(-50%, -50%);width: 72rpx;height: 72rpx;}}}.drawer_container_show {transform: translate3d(0, 0, 0);height: 180px;padding: 40rpx 30rpx;// height: 100rpx;// visibility: visible;}}

相关文章:

uniapp android底部弹框

uniapp android底部弹框&#xff0c;带有动画效果 <view class"popup_box"><view class"bottom_more" click"handleClickCancel"><image src"/static/images/rescue/icon_more.png"></image></view><…...

hashedWheelTimer类

hashedWheelTimer类 目录概述需求&#xff1a; 设计思路实现思路分析1.hashedWheelTimer类 拓展实现 参考资料和推荐阅读 Survive by day and develop by night. talk for import biz , show your perfect code,full busy&#xff0c;skip hardness,make a better result,wait …...

【自动化测试】Selenium IDE脚本编辑与操作

之前&#xff0c;我们录制脚本时是录制鼠标和键盘的所有在浏览器的操作&#xff0c;那么脚本会出现多余的步骤&#xff0c;有时候我们需要手动填写脚本或修改脚本&#xff0c;所以我们有必要对selenium IDE脚本编辑与操作有所了解&#xff1b;&#xff08;采用录制的方式很容易…...

杭电多校2023“钉耙编程”中国大学生算法设计超级联赛(5)

1006Touhou Red Red Blue dp 设状态方程为前i个数中&#xff0c;当前第一个包里面的是0/1/2/3状态&#xff0c;第二个包里面是0/1/2/3状态 0代表着还没有颜色&#xff0c;1代表R&#xff0c;2代表G&#xff0c;3代笔B颜色 初始状态都没选择颜色所以都是状态0 没选择颜色只…...

Matlab进阶绘图第24期—悬浮柱状图

悬浮柱状图是一种特殊的柱状图。 与常规柱状图相比&#xff0c;悬浮柱状图可以通过悬浮的矩形展示最小值到最大值的范围&#xff08;或其他范围表达&#xff09;&#xff0c;因此在多个领域得到应用。 本文使用自己制作的Floatingbar小工具进行悬浮柱状图的绘制&#xff0c;先…...

【题解】链表中倒数最后k个结点、删除链表的倒数第n个节点

文章目录 链表中倒数最后k个结点删除链表的倒数第n个节点 链表中倒数最后k个结点 题目链接&#xff1a;链表中倒数最后k个结点 解题思路1&#xff1a;先找长度再找k对应的节点 首先遍历一遍链表找到链表的长度n 然后比较长度和k的大小关系&#xff0c;如果比k小&#xff0c;…...

网络安全大厂面试题

自我介绍 有没有挖过src&#xff1f; 平时web渗透怎么学的&#xff0c;有实战吗&#xff1f;有过成功发现漏洞的经历吗&#xff1f; 做web渗透时接触过哪些工具 xxe漏洞是什么&#xff1f;ssrf是什么&#xff1f; 打ctf的时候负责什么方向的题 为什么要搞信息安全&#xff0c;对…...

7.事件类型

7.1鼠标事件 案例-轮播图点击切换 需求&#xff1a;当点击左右的按钮&#xff0c;可以切换轮播图 分析: ①右侧按钮点击&#xff0c;变量&#xff0c;如果大于等于8&#xff0c;则复原0 ②左侧按钮点击&#xff0c;变量–&#xff0c;如果小于0&#xff0c;则复原最后一张 ③鼠…...

ts中声明引入未使用的报错——解决方案

在编写ts项目的时候&#xff0c;经常会出现如下报错&#xff1a; 导入声明中的所有导入都未使用 这是因为导入的模块暂时没有使用&#xff0c;ts给的一个提示信息 解决方案&#xff1a; 在ts.config.json中 把noUnusedLocals 设置为false即可 {"compilerOptions"…...

集团MySQL的酒店管理系统

酒店管理系统 概述 基于Spring Spring MVC MyBatis的酒店管理系统&#xff0c;主要实现酒店客房的预定、入住以及结账等功能。使用Maven进行包管理。 用户端主要功能包括&#xff1a; 登录注册、客房预订、客房评论&#xff08;编写评论和查看评论&#xff09; 后台管理主要…...

Kotlin基础(九):对象和委托

前言 本文主要讲解kotlin对象和委托。 Kotlin文章列表 Kotlin文章列表: 点击此处跳转查看 目录 1.1 对象 在Kotlin中&#xff0c;对象&#xff08;Object&#xff09;是一个具有特殊用途的单例实例。它是一种创建单个实例的方式&#xff0c;确保在整个应用程序中只存在一个特…...

八大排序算法--希尔排序(动图理解)

目录 希尔排序 概念 算法思路 动画演示 代码如下 复杂度分析 时间复杂度测试 运行结果 完整代码 创作不易&#xff0c;如果本篇博客对您有一定的帮助&#xff0c;大家记得留言点赞哦。 希尔排序 概念 希尔排序是插入排序的一种&#xff0c;是对直接插入排序的优化。其…...

数据结构之常见排序算法

文章目录 1.排序概念2.10种排序比较3.排序算法3.1直接插入排序&#xff08;元素越有序&#xff0c;越高效&#xff09;3.2希尔排序序( 缩小增量排序 )3.3直接选择排序3.5堆排序3.6冒泡排序3.8快速排序 递归实现&#xff08;无序使用最好&#xff09;3.8.1挖坑法 &#xff08;建…...

Java版企业电子招标采购系统源代码Spring Boot + 二次开发 + 前后端分离 构建企业电子招采平台之立项流程图

项目说明 随着公司的快速发展&#xff0c;企业人员和经营规模不断壮大&#xff0c;公司对内部招采管理的提升提出了更高的要求。在企业里建立一个公平、公开、公正的采购环境&#xff0c;最大限度控制采购成本至关重要。符合国家电子招投标法律法规及相关规范&#xff0c;以及审…...

2.2 模型与材质基础

一、渲染管线与模型基础 1. 渲染管线 可编程阶段&#xff08;蓝色区域&#xff09;&#xff1a; 1顶点着色器 2几何着色器 3片元着色器 2. 模型的实现原理 UV&#xff1a;在建模软件中&#xff0c;进行UV展开&#xff0c;UV会放在一个横向为U纵向为V&#xff0c;范围&#xff0…...

什么是Docker

一 、什么是Docker 1.1 简介 Docker 使用 Google 公司推出的 Go 语言 (opens new window)进行开发实现&#xff0c;基于 Linux 内核的 cgroup (opens new window)&#xff0c;namespace (opens new window)&#xff0c;以及 OverlayFS (opens new window)类的 Union FS (open…...

1109. 航班预订统计

这里有 n 个航班&#xff0c;它们分别从 1 到 n 进行编号。 有一份航班预订表 bookings &#xff0c;表中第 i 条预订记录 bookings[i] [firsti, lasti, seatsi] 意味着在从 firsti 到 lasti &#xff08;包含 firsti 和 lasti &#xff09;的 每个航班 上预订了 seatsi 个座…...

[SQL挖掘机] - 窗口函数 - 合计: rollup

介绍: rollup 是一种用于在 sql 查询中生成聚合数据的特殊操作。它可以创建包含子总计和总计的结果集&#xff0c;并可用于生成层次化报表或汇总数据。 rollup 操作在 group by 子句中使用&#xff0c;可以在查询结果中生成多级汇总数据。它会根据指定的列进行分组&#xff0…...

2022年全国硕士研究生入学统一考试管理类专业学位联考写作试题——解析版

四、写作&#xff1a;第56&#xff5e;57小题&#xff0c;共65分。其中论证有效性分析30分&#xff0c;论说文35分。 56.论证有效性分析&#xff1a;分析下述论证中存在的缺陷和漏洞&#xff0c;选择若干要点&#xff0c;写一篇600字左右的文章&#xff0c;对该论证的有效性进…...

元类在测试框架中的运用

元类在测试框架中的运用 书接上回 我们知道了元类的基本用法&#xff0c;也写了一个小demo&#xff0c;接下来我们就尝试运用进我们测试框架。 #一款无需编码且易用于二次开发的接口测试框架。 #我写的我写的我写的我写的 pip install mwj-apitest #这里面就用到了元类&…...

Redis相关知识总结(缓存雪崩,缓存穿透,缓存击穿,Redis实现分布式锁,如何保持数据库和缓存一致)

文章目录 1.什么是Redis&#xff1f;2.为什么要使用redis作为mysql的缓存&#xff1f;3.什么是缓存雪崩、缓存穿透、缓存击穿&#xff1f;3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...

通过Wrangler CLI在worker中创建数据库和表

官方使用文档&#xff1a;Getting started Cloudflare D1 docs 创建数据库 在命令行中执行完成之后&#xff0c;会在本地和远程创建数据库&#xff1a; npx wranglerlatest d1 create prod-d1-tutorial 在cf中就可以看到数据库&#xff1a; 现在&#xff0c;您的Cloudfla…...

Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例

使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件&#xff0c;常用于在两个集合之间进行数据转移&#xff0c;如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model&#xff1a;绑定右侧列表的值&…...

大型活动交通拥堵治理的视觉算法应用

大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动&#xff08;如演唱会、马拉松赛事、高考中考等&#xff09;期间&#xff0c;城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例&#xff0c;暖城商圈曾因观众集中离场导致周边…...

【位运算】消失的两个数字(hard)

消失的两个数字&#xff08;hard&#xff09; 题⽬描述&#xff1a;解法&#xff08;位运算&#xff09;&#xff1a;Java 算法代码&#xff1a;更简便代码 题⽬链接&#xff1a;⾯试题 17.19. 消失的两个数字 题⽬描述&#xff1a; 给定⼀个数组&#xff0c;包含从 1 到 N 所有…...

AtCoder 第409​场初级竞赛 A~E题解

A Conflict 【题目链接】 原题链接&#xff1a;A - Conflict 【考点】 枚举 【题目大意】 找到是否有两人都想要的物品。 【解析】 遍历两端字符串&#xff0c;只有在同时为 o 时输出 Yes 并结束程序&#xff0c;否则输出 No。 【难度】 GESP三级 【代码参考】 #i…...

CRMEB 框架中 PHP 上传扩展开发:涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云

目前已有本地上传、阿里云OSS上传、腾讯云COS上传、七牛云上传扩展 扩展入口文件 文件目录 crmeb\services\upload\Upload.php namespace crmeb\services\upload;use crmeb\basic\BaseManager; use think\facade\Config;/*** Class Upload* package crmeb\services\upload* …...

10-Oracle 23 ai Vector Search 概述和参数

一、Oracle AI Vector Search 概述 企业和个人都在尝试各种AI&#xff0c;使用客户端或是内部自己搭建集成大模型的终端&#xff0c;加速与大型语言模型&#xff08;LLM&#xff09;的结合&#xff0c;同时使用检索增强生成&#xff08;Retrieval Augmented Generation &#…...

【网络安全】开源系统getshell漏洞挖掘

审计过程&#xff1a; 在入口文件admin/index.php中&#xff1a; 用户可以通过m,c,a等参数控制加载的文件和方法&#xff0c;在app/system/entrance.php中存在重点代码&#xff1a; 当M_TYPE system并且M_MODULE include时&#xff0c;会设置常量PATH_OWN_FILE为PATH_APP.M_T…...

Linux中《基础IO》详细介绍

目录 理解"文件"狭义理解广义理解文件操作的归类认知系统角度文件类别 回顾C文件接口打开文件写文件读文件稍作修改&#xff0c;实现简单cat命令 输出信息到显示器&#xff0c;你有哪些方法stdin & stdout & stderr打开文件的方式 系统⽂件I/O⼀种传递标志位…...