uniapp组件库Popup 弹出层 的使用方法

目录

#平台差异说明

#基本使用

#设置弹出层的方向

#设置弹出层的圆角

#控制弹窗的宽度 | 高度

#内容局部滚动

#API

#Props

#Event


弹出层容器,用于展示弹窗、信息提示等内容,支持上、下、左、右和中部弹出。组件只提供容器,内部内容由用户自定义

#平台差异说明

AppH5微信小程序支付宝小程序百度小程序头条小程序QQ小程序

#基本使用

  • 弹出层的内容通过slot传入,由用户自定义
  • 通过v-model绑定一个布尔值的变量控制弹出层的打开和收起
<template><view><u-popup v-model="show"><view>出淤泥而不染,濯清涟而不妖</view></u-popup><u-button @click="show = true">打开</u-button></view>
</template><script>export default {data() {return {show: false}}}
</script>

#设置弹出层的方向

  • 可以通过mode参数设置,可以设置为lefttoprightbottomcenter
<template><u-popup v-model="show" mode="top"><view>人生若只如初见,何事秋风悲画扇</view></u-popup>
</template>

#设置弹出层的圆角

可以给border-radius设置一个值来给弹窗增加圆角,单位rpx。

<template><u-popup v-model="show" mode="top" border-radius="14"><view>人生若只如初见,何事秋风悲画扇</view></u-popup>
</template>

#控制弹窗的宽度 | 高度

这里说的宽度,指的是左边,右边,中部弹出的场景,高度指的是顶部和底部弹出的场景(因为这两个场景宽度都是100%)。
uView提供了length来控制此种情况,此值可以是数值(单位rpx),auto百分比等,内部会自动处理对应的逻辑。 如果为auto的时候,表示弹窗的宽度 | 高度由内容撑开。

1.3.7版本新增widthheight参数: 1.3.7

1.3.7版本后,优先推荐widthheight参数,并且优先级会高于length,这3个参数都可以设置百分比auto数值(单位rpx)、或者是带pxrpx单位的字符串:

  • width只对mode = left | center | right模式有效
  • height只对mode = top | center | bottom模式有效

提示

1.3.7版本后,内置了scroll-view元素,内如内容超出容器的高度,将会自动获得垂直滚动的特性,如果您因为在slot内容做了滚动的处理,而造成了 冲突的话,请移除自定义关于滚动部分的逻辑。

<template><u-popup v-model="show" mode="top" length="60%"><view>等闲变却故人心,却道故人心易变</view></u-popup><u-popup v-model="show" mode="center" width="500rpx" height="600px"><view>骊山语罢清宵半,泪雨霖铃终不怨</view></u-popup>
</template>

#内容局部滚动

如果您需要让弹窗中的内容局部滚动,局部固定,比如商城底部弹出SKU选择的场景,可以按如下思路进行处理:

  1. 在弹窗内容中放一个scroll-view组件,设置为竖向滚动,并指定高度(必须)
  2. scroll-view组件下方放一块无需滚动内容,如下:
<template><view class=""><u-button @click="show = true;">打开弹窗</u-button><u-popup mode="bottom" v-model="show"><view class="content"><scroll-view scroll-y="true" style="height: 300rpx;"><view><view v-for="index in 20" :key="index">第{{index}}个Item</view></view></scroll-view><view class="confrim-btn"><u-button @click="show = false;">确定</u-button></view></view></u-popup></view>
</template><script>export default {data() {return {show: false}}}
</script><style lang="scss" scoped>.content {padding: 24rpx;text-align: center;}
</style>

#API

#Props

注意:props中没有控制弹窗打开与收起的参数,因为这是通过v-model绑定变量实现的,见上方说明。

参数说明类型默认值可选值
mode弹出方向Stringlefttop / right / bottom / center
mask是否显示遮罩Booleantruefalse
lengthmode=left | 见上方说明String | Numberauto-
zoom是否开启缩放动画,只在modecenter时有效Booleantruefalse
safe-area-inset-bottom是否开启底部安全区适配Booleanfalsetrue
mask-close-able点击遮罩是否可以关闭弹出层Booleantruefalse
custom-style用户自定义样式Object--
border-radius弹窗圆角值Number | String0-
z-index弹出内容的z-indexNumber | String10075-
closeable是否显示关闭图标Booleanfalsetrue
close-icon关闭图标的名称,只能uView的内置图标Stringclose-
close-icon-pos自定义关闭图标位置,top-left为左上角,top-right为右上角,bottom-left为左下角,bottom-right为右下角Stringtop-righttop-left / bottom-left / bottom-right
close-icon-color关闭图标的颜色String#909399-
close-icon-size关闭图标的大小,单位rpxString | Number30-
width 1.3.7mode = left | center | right时有效,优先级高于lengthString | Number--
height 1.3.7mode = top | center | bottom时有效,优先级高于lengthString | Number--
negative-top中部弹出时,以避免可能弹出的键盘重合,往上偏移的值,单位任意,数值则默认为rpx单位String | Number0-
mask-custom-style 1.5.4遮罩自定义样式,一般用于修改遮罩透明度对象形式,如:{background: 'rgba(0, 0, 0, 0.5)'}Object--
duration 1.6.6遮罩打开或收起的动画过渡时间,单位msString | Number250-

#Event

事件名说明回调参数版本
open弹出层打开--
close弹出层收起--

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

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

相关文章

CSS:backdrop-filter实现毛玻璃的效果

实现效果 实现代码 /* 关键属性 */ background-color: rgba(255, 255, 255, 0.4); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);完整代码 <style>/* 遮罩层 */.mo-mask {position: fixed;top: 0;bottom: 0;left: 0;right: 0;width: 100%;height…

【排序算法】五、冒泡排序(C/C++)

「前言」文章内容是排序算法之冒泡排序的讲解。&#xff08;所有文章已经分类好&#xff0c;放心食用&#xff09; 「归属专栏」排序算法 「主页链接」个人主页 「笔者」枫叶先生(fy) 目录 冒泡排序1.1 原理1.2 代码实现&#xff08;C/C&#xff09;1.3 特性总结 冒泡排序 1.1…

WorkPlus AI助理私有化部署,助力企业降本增效

在当今数字化时代&#xff0c;提供卓越的客户服务成为了企业成功的重要因素。而AI智能客服技术的兴起&#xff0c;则成为了实现高效、快捷客户服务的利器。作为一款领先的AI助理解决方案&#xff0c;WorkPlus AI助理能够私有化部署&#xff0c;为企业打造私有知识库&#xff0c…

WorkPlus Meet私有化视频会议软件-构建安全高效的内网会议体验

在企业内部&#xff0c;高效的会议协作是推动团队协同和工作效率的关键。而内网会议系统成为了构建安全高效的内部会议体验的必要工具。作为一家领先的内网会议系统&#xff0c;WorkPlus Meet以其卓越的性能和智能化的功能&#xff0c;助力企业实现高效安全的内部会议体验。 为…

爬山算法优化遗传算法优化极限学习机的多分类预测,p-ga-elm多分类预测

目录 背影 极限学习机 爬山算法优化遗传算法优化极限学习机的多分类预测,p-ga-elm多分类预测 主要参数 MATLAB代码 效果图 结果分析 展望 完整代码下载链接:爬山算法优化遗传算法优化极限学习机的多分类预测,p-ga-elm多分类预测(代码完整,数据)资源-CSDN文库 https://d…

django邮件通知功能-

需求&#xff1a; 1&#xff1a;下单人员下订单时需要向组长和投流手发送邮件通知 2&#xff1a;为何使用邮件通知功能&#xff1f;因为没钱去开通短信通知功能 设计 1&#xff1a;给用户信息表添加2个字段 第一个字段为&#xff1a;是否开通邮件通知的布尔值 第二个字段为: 用…

react15与react16的本质区别

React 15 和 React 16 在架构和一些核心特性上存在本质性的区别。 1.Reconciliation&#xff08;协调&#xff09;算法&#xff1a; React 15: React 15 使用了递归的协调算法&#xff0c;即采用深度优先遍历整个组件树来协调更新。这种方式在处理大型组件树或深度嵌套组件时…

面试官:如何实现三栏布局,中间自适应

今天聊点简单的&#xff0c;最近在整理面试题的时候&#xff0c;看到css部分&#xff0c;感觉自己有段时间没有切页面了&#xff0c;正好趁着这个机会好好复习一下&#xff0c;加深一下印象。 如何实现三栏布局 中间自适应&#xff1f;这也是在前端面试官经常会问到的&#xf…

unity 利用Graphics.Blit来制作图片效果

c# 的代码 using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI;public class GraphicsBlitTest : MonoBehaviour {public Texture2D source;//原纹理public Material material;//效果材质public RawImage rawImage;// Sta…

前端实现轮训和长连接

简介 轮训和长连接相关内容可以参考之前的文章消息推送系统。消息推送系统-CSDN博客文章浏览阅读106次。在餐饮行业中&#xff0c;店内应用有pos、厨显屏等&#xff0c;云端应用为对应数据中心。为了实现云端数据和操作指令下发到店内应用&#xff0c;需要有一个系统实现这个功…

【手写数据库toadb】01 开发数据库内核准备阶段-开发环境准备

开发环境 ​专栏内容: 手写数据库toadb 本专栏主要介绍如何从零开发,开发的步骤,以及开发过程中的涉及的原理,遇到的问题等,让大家能跟上并且可以一起开发,让每个需要的人成为参与者。 本专栏会定期更新,对应的代码也会定期更新,每个阶段的代码会打上tag,方便阶段学习…

配置DNS主从服务器,实现真反向解析

主服务器 [rootbogon ~]# systemctl stop firewalld.service #关闭防火墙 [rootbogon ~]# setenforce 0 #关闭selinux [rootbogon ~]# systemctl restart named #启动dns服务 [rootbogon ~]# vim /etc/named.conf #进入dns配置文件 options {#监听…

udp丢包处理方法

UDP丢包处理方法如下1&#xff1a; 使用前向纠错码&#xff08;FEC&#xff09;技术。通过在发送端添加冗余信息&#xff0c;使接收端能够在收到部分丢失的数据时进行纠错。 使用前向纠错码&#xff08;FEC&#xff09;技术是一种有效的处理UDP丢包的方法。FEC技术通过在发送…

【ARM 嵌入式 编译系列 2.4 -- GCC 编译参数学习 -Wl,--gc-sections 】

请阅读【嵌入式开发学习必备专栏 之 ARM GCC 编译专栏】 文章目录 概述-Wl 选项例子&#xff1a; --gc-sections --gc-sections例子&#xff1a; -Wshadow例子&#xff1a; -Wlogical-op例子&#xff1a; -Waggregate-return例子&#xff1a; -Wfloat-equal例子&#xff1a; -W…

2023年12月 电子学会 青少年软件编程等级考试Scratch三级真题

202312 青少年软件编程等级考试Scratch三级真题 一、单项题 第 1 题 运行左图程序&#xff0c;想得到右图中的效果&#xff0c;红色框应填写的数值是&#xff1f;&#xff08; &#xff09; A&#xff1a;12 B&#xff1a;11 C&#xff1a;10 D&#xff1a;9 第 2 题 下列…

每天都美好的一天

每天我们都会遇到不同的事情&#xff0c;开心的、愤怒的、悲伤的等等&#xff0c;今天过完明天我们还得继续&#xff0c;所以一切又显得不那么重要。一天中如果有不开心的事情发生会影响我们当天很长一段时间&#xff0c;甚至未来几天。 今天所做之事都是自己明天的基础&#…

修改live server的默认浏览器(vscode)

在插件打开设置 修改选定浏览器

VC++中使用OpenCV进行颜色检测

VC中使用OpenCV进行颜色检测 在VC中使用OpenCV进行颜色检测非常简单&#xff0c;首选读取一张彩色图像&#xff0c;并调用函数cvtColor(img, imgHSV, COLOR_BGR2HSV);函数将原图img转换成HSV图像imgHSV&#xff0c;再设置好HSV三个分量的上限和下限值&#xff0c;调用inRange函…

C++实现一个简单的学生管理系统

目录 1.一个简单的学生管理系统简介 2.定义一个 Student 类 2.1用于表示学生信息。 3.定义一个 StudentManager 类 3.1用于管理学生信息。 4.在 main 函数中 4.1使用上述两个类来实现一个简单的学生管理系统 5.C类模板 推荐阅读&#xff1a; calloc与realloc和malloc的…

多线程(看这一篇就够了,超详细,满满的干货)

多线程 一.认识线程&#xff08;Thread&#xff09;1. 1) 线程是什么1. 2) 为啥要有线程1.3) 进程和线程的区别标题1.4) Java的线程和操作系统线程的关系 二.创建线程方法1:继承Thread类方法2:实现Runnable接口方法3:匿名内部类创建Thread子类对象标题方法4:匿名内部类创建Runn…