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;}}

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

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

相关文章

AutoDL从0到1搭建stable-diffusion-webui

前言 AI绘画当前非常的火爆&#xff0c;随着Stable diffusion&#xff0c;Midjourney的出现将AI绘画推到顶端&#xff0c;各大行业均受其影响&#xff0c;离我们最近的AI绘画当属Stable diffusion&#xff0c;可本地化部署&#xff0c;只需电脑配备显卡即可完成AI绘画工作&…

Git常见问题

git clone 提示OpenSSL SSL_read git clone 时提示Connection was reset, errno 10054类错误 fatal: unable to acce ss https://github.com/fex-team/ueditor.git/: OpenSSL SSL_read: Connection was reset, errno 10054 备注&#xff1a;以下方法只是归纳整理&#xff0c;…

使用事件侦听器和 MATLAB GUI 查看 Simulink 信号研究

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

仓库管理系统有哪些功能,如何对仓库进行有效管理

阅读本文&#xff0c;您可以了解&#xff1a;1、仓库管理系统有哪些功能&#xff1b;2、如何对仓库进行有效管理。 仓库是制造业的开端&#xff0c;原材料的领料开始。企业的仓库管理是涉及企业生产、企业资金流和企业的经营风险的关键环节。在众多的工业企业、制造型企业、贸…

Linux 安装软件 - yum工具

在Linux下安装软件, 一个通常的办法是下载到程序的源代码, 并进行编译, 得到可执行程序. 但是这样太麻烦了, 于是有些人把一些常用的软件提前编译好, 做成软件包(可以理解成windows上的安装程序)放在一个服务器上, 通过包管理器可以很方便的获取到这个编译好的软件包, 直接进行…

FFmpeg下载安装及Windows开发环境设置

1 FFmpeg简介 FFmpeg&#xff1a;FFmpeg是一套可以用来记录、转换数字音频、视频&#xff0c;并能将其转化为流的开源计算机程序。采用LGPL或GPL许可证。它提供了录制、转换以及流化音视频的完整解决方案。项目的名称来自MPEG视频编码标准&#xff0c;前面的"FF"代表…

mysql函数及用法

目录 一、前言 二、函数 2.1五大聚合函数 2.2 日期函数 3.字符串函数 三. 总结&#xff1a; 一、前言 mySQL 是一种常见的关系型数据库管理系统&#xff0c;提供了大量的函数可以帮助开发者有效地操作和管理数据库。mySQL根据这些函数将数据更好的进行操作&#xff0c;从…

《向量数据库》——怎么安装向量检索库Faiss?

装 Faiss 以下教程将展示如何在 Linux 系统上安装 Faiss: 1. 安装 Conda。 在安装 Faiss 之前,先在系统上安装 Conda。Conda 是一个开源软件包和环境管理系统,可在 Windows、macOS 和 Linux 操作系统上运行。根据以下步骤在 Linux 系统上安装 Conda。 2. 从官网…

Python:Spider爬虫工程化入门到进阶(1)创建Scrapy爬虫项目

Python&#xff1a;Spider爬虫工程化入门到进阶系列: Python&#xff1a;Spider爬虫工程化入门到进阶&#xff08;1&#xff09;创建Scrapy爬虫项目Python&#xff1a;Spider爬虫工程化入门到进阶&#xff08;2&#xff09;使用Spider Admin Pro管理scrapy爬虫项目 本文通过简…

MySQL 重置root 密码

5.7 版本 首先要把服务mysql57 关闭 net stop MySQL57 在安装的mysql57的程序的bin中 运行cmd&#xff08;管理员运行&#xff09; mysqld --defaults-file‘mysql存放数据的位置\my.ini’ --skip-grant-tables 上图 错误 注意&#xff1a;如果遇到mysqld: Can’t change dir…

大数据之Hadoop(一)

目录 一、准备三台服务器 二、虚拟机间配置免密登录 三、安装JDK 四、关闭防火墙 五、关闭安全模块SELinux 六、修改时区和自动时间同步 一、准备三台服务器 我们先准备三台服务器&#xff0c;可以通过虚拟机的方式创建&#xff0c;也可以选择云服务器。 关于如何创建虚…

MySQL最终弹-并发(脏读,不可重复读,幻读及区别),JDBC的使用和安装,最全万字

一、&#x1f49b;并发基本概念 并发的基本意思&#xff1a; 什么是并发呢&#xff1f;简单的理解就是同一时间执行 服务器同一时刻&#xff0c;给多个客户端提供服务&#xff5e;&#xff5e;&#xff0c;这两个客户端都可以给服务器提交事务。 如果提交两个事务&#xff0c;改…

Linux安装操作(Mac版本)

Parallels Desktop的简介 Parallels Desktop是Mac平台上的虚拟机软件&#xff0c;也是Mac平台最好的虚拟机软件之一。它允许用户在Mac OS X系统上同时运行其他操作系统&#xff0c;例如Windows、Linux等。Parallels Desktop为Mac用户提供了使用其他操作系统和软件的便利性&…

【ASP.NET MVC】使用动软(三)(11)

一、问题 上文中提到&#xff0c;动软提供了数据库的基本操作功能&#xff0c;但是往往需要添加新的功能来解决实际问题&#xff0c;比如GetModel&#xff0c;通过id去查对象&#xff1a; 这个功能就需要进行改进&#xff1a;往往程序中获取的是实体的其他属性&#xff0c;比如…

基于 JavaScript 的富文本编辑器框架简单使用

1.打开wangEditor wangEditor开源 Web 富文本编辑器&#xff0c;开箱即用&#xff0c;配置简单https://www.wangeditor.com/ 2.html文件 <link href"https://unpkg.com/wangeditor/editorlatest/dist/css/style.css" rel"stylesheet"> <style&…

直播预告 | 开源运维工具使用现状以及可持续产品的思考

运维平台自上世纪90年代开始进入中国市场&#xff0c;曾形成以传统四大外企&#xff1a;IBM、BMC、CA、HP为代表的头部厂商&#xff0c;还有一众从网管起家的国内厂商。2010年前后&#xff0c;出现了以Zabbix、Nagios、Cacti为代表的开源工具&#xff0c;后来又陆续出现了Prome…

13-5_Qt 5.9 C++开发指南_基于信号量的线程同步_Semaphore

文章目录 1. 信号量的原理2. 双缓冲区数据采集和读取线程类设计3. QThreadDAQ和QThreadShow 的使用4. 源码4.1 可视化UI设计框架4.2 qmythread.h4.3 qmythread.cpp4.4 dialog.h4.5 dialog.cpp 1. 信号量的原理 信号量(Semaphore)是另一种限制对共享资源进行访问的线程同步机制…

PHP实践:用openssl打造安全可靠的API签名验证系统

&#x1f3c6;作者简介&#xff0c;黑夜开发者&#xff0c;全栈领域新星创作者✌&#xff0c;阿里云社区专家博主&#xff0c;2023年6月csdn上海赛道top4。 &#x1f3c6;数年电商行业从业经验&#xff0c;历任核心研发工程师&#xff0c;项目技术负责人。 &#x1f3c6;本文已…

爬虫---练习源码

选取的是网上对一些球员的评价&#xff0c;来评选谁更加伟大一点 import csv import requests import re import timedef main(page):url fhttps://tieba.baidu.com/p/7882177660?pn{page}headers {User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/53…

熟练掌握ChatGPT解决复杂问题——学会提问

目录 引言 一、5W1H分析法 1. 简单的问题&#xff08;what、where、when、who&#xff09; 2.复杂的问题&#xff08;why、how&#xff09; 2.1 为什么&#xff08;Why&#xff09;——原因 2.2 方式 &#xff08;How&#xff09;——如何 二、如何提问得到更高质量的答案…