uni-app预览图片-Popup 弹出层

最新推荐文章于 2024-06-10 23:22:38 发布
最新推荐文章于 2024-06-10 23:22:38 发布
阅读量5.2k 收藏 6
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_37935725/article/details/108508712
版权

插件市场：https://ext.dcloud.net.cn/plugin?id=329

参考示例

<template>
	<view>
		<text class="example-info">弹出层组件用于弹出一个覆盖到页面上的内容，使用场景如：底部弹出分享弹窗、页面插屏广告等。</text>
		<uni-section title="基本用法" type="line"></uni-section>
		<view class="example-body">
			<button class="button" type="primary" @click="togglePopup('top', 'popup')">顶部弹出 popup</button>
			<button class="button" type="primary" @click="togglePopup('center', 'popup')">中间弹出 popup</button>
			<button class="button" type="primary" @click="togglePopup('bottom', 'popup')">底部弹出 popup</button>
		</view>
		<uni-section title="自定义弹出层" type="line"></uni-section>
		<view class="example-body">
			<button class="button" type="primary" @click="togglePopup('center', 'tip')">提示框</button>
			<button class="button" type="primary" @click="togglePopup('center', 'image')">插屏广告</button>
			<button class="button" type="primary" @click="togglePopup('bottom', 'share')">底部分享</button>
		</view>
		<view style="height: 400px;"></view>
		<uni-popup ref="showpopup" :type="type" @change="change"><text class="popup-content">{{ content }}</text></uni-popup>

		<uni-popup ref="showtip" :type="type" :mask-click="false" @change="change">
			<view class="uni-tip">
				<text class="uni-tip-title">警告</text>
				<text class="uni-tip-content">这是一个通过自定义 popup，自由扩展的 警告弹窗。点击遮罩不会关闭弹窗。</text>
				<view class="uni-tip-group-button">
					<text class="uni-tip-button" @click="cancel('tip')">取消</text>
					<text class="uni-tip-button" @click="cancel('tip')">确定</text>
				</view>
			</view>
		</uni-popup>
		<!-- 插屏弹窗 -->
		<uni-popup ref="showimage" :type="type" :mask-click="true" @change="change">
			<view class="uni-image">
				<image class="image" src="/static/uni.png" mode="scaleToFill" />
				<view class="uni-image-close" @click="cancel('image')">
					<uni-icons type="clear" color="#fff" size="30" />
				</view>
			</view>
		</uni-popup>
		<!-- 底部分享弹窗 -->
		<uni-popup ref="showshare" :type="type" @change="change">
			<view class="uni-share">
				<text class="uni-share-title">分享到</text>
				<view class="uni-share-content">
					<view v-for="(item, index) in bottomData" :key="index" class="uni-share-content-box">
						<view class="uni-share-content-image">
							<image :src="item.icon" class="content-image" mode="widthFix" />
						</view>
						<text class="uni-share-content-text">{{ item.text }}</text>
					</view>
				</view>
				<text class="uni-share-btn" @click="cancel('share')">取消分享</text>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniSection from '@/components/uni-section/uni-section.vue'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
	export default {
		components: {
			uniSection,
			uniPopup,
			uniIcons
		},
		data() {
			return {
				type: '',
				list: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
				content: '顶部弹 popup',
				bottomData: [{
						text: '微信',
						icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/grid-2.png',
						name: 'wx'
					},
					{
						text: '支付宝',
						icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/grid-8.png',
						name: 'wx'
					},
					{
						text: 'QQ',
						icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/gird-3.png',
						name: 'qq'
					},
					{
						text: '新浪',
						icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/grid-1.png',
						name: 'sina'
					},
					{
						text: '百度',
						icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/grid-7.png',
						name: 'copy'
					},
					{
						text: '其他',
						icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/grid-5.png',
						name: 'more'
					}
				]
			}
		},
		methods: {
			togglePopup(type, open) {
				switch (type) {
					case 'top':
						this.content = '顶部弹出 popup'
						break

					case 'bottom':
						this.content = '底部弹出 popup'
						break
					case 'center':
						this.content = '居中弹出 popup'
						break
				}
				this.type = type
				this.$nextTick(() => {
					this.$refs['show' + open].open()
				})
			},
			cancel(type) {
				this.$refs['show' + type].close()
			},
			change(e) {
				console.log('是否打开:' + e.show)
			}
		},
		onBackPress() {
			this.$refs['showpopup'].close()
			this.$refs['showtip'].close()
			this.$refs['showimage'].close()
			this.$refs['showshare'].close()
		}
	}
</script>
<style>
	/* 头条小程序组件内不能引入字体 */
	/* #ifdef MP-TOUTIAO */
	@font-face {
		font-family: uniicons;
		font-weight: normal;
		font-style: normal;
		src: url('~@/static/uni.ttf') format('truetype');
	}

	/* #endif */

	/* #ifndef APP-NVUE */
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #efeff4;
		min-height: 100%;
		height: auto;
	}

	view {
		font-size: 14px;
		line-height: inherit;
	}

	.example {
		padding: 0 15px 15px;
	}

	.example-info {
		padding: 15px;
		color: #3b4144;
		background: #ffffff;
	}

	.example-body {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		padding: 0;
		font-size: 14px;
		background-color: #ffffff;
	}

	/* #endif */
	.example {
		padding: 0 15px;
	}

	.example-info {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 15px;
		color: #3b4144;
		background-color: #ffffff;
		font-size: 14px;
		line-height: 20px;
	}

	.example-info-text {
		font-size: 14px;
		line-height: 20px;
		color: #3b4144;
	}


	.example-body {
		flex-direction: column;
		padding: 15px;
		background-color: #ffffff;
	}

	.word-btn-white {
		font-size: 18px;
		color: #FFFFFF;
	}

	.word-btn {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		border-radius: 6px;
		height: 48px;
		margin: 15px;
		background-color: #007AFF;
	}

	.word-btn--hover {
		background-color: #4ca2ff;
	}


	.example-body {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 5px 15px;
	}

	.button {
		flex: 1;
		margin: 10px 0;
	}

	.popup-content {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		background-color: #fff;
		padding: 15px;
		font-size: 14px;
	}

	/* 提示窗口 */
	.uni-tip {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: column;
		/* #endif */
		padding: 15px;
		width: 300px;
		background-color: #fff;
		border-radius: 10px;
	}

	.uni-tip-title {
		margin-bottom: 10px;
		text-align: center;
		font-weight: bold;
		font-size: 16px;
		color: #333;
	}

	.uni-tip-content {
		/* padding: 15px;
 */
		font-size: 14px;
		color: #666;
	}

	.uni-tip-group-button {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		margin-top: 20px;
	}

	.uni-tip-button {
		flex: 1;
		text-align: center;
		font-size: 14px;
		color: #3b4144;
	}

	/* 插屏广告 */
	.uni-image {
		position: relative;
	}

	.image {
		width: 200px;
		height: 200px;
	}

	.uni-image-close {
		margin-top: 20px;
		text-align: center;
	}

	/* 底部分享 */
	.uni-share {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: column;
		/* #endif */
		background-color: #fff;
	}

	.uni-share-title {
		line-height: 60rpx;
		font-size: 24rpx;
		padding: 15rpx 0;
		text-align: center;
	}

	.uni-share-content {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		padding: 15px;
	}

	.uni-share-content-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		width: 200rpx;
	}

	.uni-share-content-image {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: center;
		align-items: center;
		width: 60rpx;
		height: 60rpx;
		overflow: hidden;
		border-radius: 10rpx;
	}

	.content-image {
		width: 60rpx;
		height: 60rpx;
	}

	.uni-share-content-text {
		font-size: 26rpx;
		color: #333;
		padding-top: 5px;
		padding-bottom: 10px;
	}

	.uni-share-btn {
		height: 90rpx;
		line-height: 90rpx;
		font-size: 14px;
		border-top-color: #f5f5f5;
		border-top-width: 1px;
		border-top-style: solid;
		text-align: center;
		color: #666;
	}
</style>

结合项目实际应用中

 

 

 

 <style>
    /* 插屏广告 */
    .uni-image {
        position: relative;
        display:block;
    }
    .uni-image .b-tip-text{
        color:#fff;
        font-size:35rpx;
        margin-bottom:25rpx;
        text-align:center;
        display:block;
    }
    .image {
        width: 700rpx;
        /* height: 184px; */
    }
    
    .uni-image-close {
        margin-top: 20px;
        text-align: center;
        display:block;
    }
    /* report img */
    .b-report-image{
        width:700rpx;
    }
</style>

不忘初心才得始终
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
uni-app自定义uni-popup弹窗内容
03-22
自定义uni-popup内容，包含picker-view组件，前提基础需要运行在uni-app项目之下，且已保证插入外置组件，根据传入的list数据渲染选择列表，且能回填数据 组件调用<SelectPick v-if="showPick" v-model="pickValue" @close="showPick=false" :dataList="dataList" :valueKey="'value'" />
uni-ui安装初始化
11-23
【uni-ui安装初始化】是关于使用uni-app框架配置并引入uni-ui组件库的主题。uni-app是一个基于Vue.js开发的...在不断学习和实践中，你将更好地掌握uni-app和uni-ui的使用，从而提升开发效率，打造出优秀的移动端应用。
【uniapp小程序】实现二维码图片弹窗、保存图片功能
xiaotangyu7dong的博客
02-26 6887
小程序uniapp需要实现一个点击某个按钮后，弹出二维码图片，并且有保存图片的功能。 代码实现： html部分： 使用uniapp中的unipopup组件进行弹窗 <uni-popup ref="kefu" type="center" :mask-click="false" class="kefu"> <view class="popup"> <view class="icon-close"> <uni-icons type="close" size=
uni-popup
最新发布
qq_60504665的博客
06-10 765
UniPopup是uni-app框架中的一个轻量级组件，它提供了一种便捷的方式来显示弹出窗口（如对话框、通知、选择器等）。uni-popup可以帮助开发者在不同平台（如Web、H5、小程序等）上快速实现一致的用户体验，支持自定义样式和内容，同时也具有良好的交互性和可定制性。2. 动画效果：有多种内置动画供选择，如滑入、滑出、淡入淡出等。1. 弹窗内容显示：支持文本、图片、按钮等多种元素组合。3. 状态管理：可以控制弹窗是否显示、关闭以及回调函数。4. 尺寸调整：可以设置弹窗的宽度、高度和位置。
uniapp预览图片
yan263364的博客
12-16 4049
一、需求 最近有一个留言板需求，留言之后需要展示留言信息，信息里面除了文字还有图片。 点击图片，可预览图片。就用到了 uniapp 预览图片的功能：uni.previewImage(OBJECT) 二、使用 html <view class="img-c" v-show="item.pictureUrl"> <image class="img" v-for="(itemImg, imgIndex) in item.pictureUrl" :key="imgIndex" m
uniapp图片弹框效果
祈澈菇凉
01-19 6170
需求：点击提交按钮，提交成功后会弹出一个弹框，提示成功，点击右上角的叉号或者我知道了，隐藏弹框效果。 <template> <view> <form> <view class="uni-btn-v uni-common-mt"> ...
uni-app 预览图片
晨的一朵云的博客
01-30 3769
预览图片功能还不完全，未完全在各种移动设备上测试成功
uni-popup 小程序首页弹出层
@微你
08-20 1617
场景： 要求在首页加载的时候弹出弹框显示一张图片，弹出五秒后自动关闭，也可以点击 叉号手动关闭；如图： 代码： <template> <u-popup class="auth-popup" mode="center" width="600rpx" height="770rpx" :closeable="true" close-icon-color="#010101" :mask-close-able="false" close-icon-size="42" bo
react-popup：React弹出组件
02-04
-简化营销0.9.x中的重大更改现在，弹出窗口和叠加层是两个单独的层，以允许更多自定义。 有关样式示例，请参见 。全局API方法react-popup背后的想法是将其用作本机window.alert替代品。 具有一次仅显示一个弹出窗口...
react-native-popup-menu：React Native的弹出菜单组件
01-31
上下文菜单，滑入式菜单弹窗安装npm install react-native-popup-menu --save如果您使用的是较旧的RN版本，请查看我们的兼容性表。基本用法将您的应用程序包装在MenuProvider ，然后在需要的地方简单使用Menu组件。...
react-native-popup-menu:React Native的弹出菜单
05-02
react-native-popup-menu·特征定位方式描述快速定位允许将菜单对齐到任何元素的边框坚持元素的中心允许按元素宽度的中心显示菜单动态定位允许将动态偏移量添加到基本菜单位置位置限制自动应用约束，以永不超越屏幕...
Popup例子 实现弹出窗口的关闭
05-02
实现弹出窗口与主界面的分离，只要点击弹出窗口的其他部分就可以关闭弹出窗口。
uniapp 实现点击出现弹窗
RemindingMe的博客
11-15 7842
用uniapp实现一个弹出窗
uniapp中popup组件中的使用以及坑
qq_43408070的博客
01-04 2万+
实现效果：点击实现弹出层 根据插件市场的来 但是在引入的时候因为我位置不对，所以我引入的时候没按照图上面顺序引入 就报错click is not a function 什么的 百度半天也没找到什么原因 ，就在准备放弃的时候 准备删除引入的时候发现自己引入的错误了 后面放图片也报错，过了一会就不报错了？？？ change这个还挺有用的能够获取到你的type 中间还是底部弹出的一个状态 最开始css样式怎么都搞不好，改变哪里的宽度都不行，于是f12 一层层找，添加width属性一个个尝试，
uni-app 弹出层组件的实现
忧郁的蛋的专栏
04-08 1071
在使用此组件时，可以通过传递“visible”属性来控制弹出层的显示和隐藏，通过 position 属性控制弹出层的位置。可以在组件的插槽中添加内容。
uniapp图片放大缩小预览，并支持图片拖动附效果图
a_靖的博客
06-07 1万+
uniapp或者小程序实现图片预览放大缩小并可以拖动
解决uniapp中，popup弹框，继续使用upload图片导致zindex出现问题。
SpitFire_Dinosau的博客
02-02 637
主要原因是因为，在使用popup的时候，uview设置zindex是固定10075，里面还存在一个overlay遮罩层，他的zindex是10070。打开图片的时候，图片的遮罩层是999，单纯使用popup的zindex的时候，就会让overlay遮罩层过高，导致样式重叠。修改u-popup。vue中，overly里面zindex的值。overlay添加：zIndex=‘oIndex’找到uview源文件，在props。
uniapp之常用提示弹框
热门推荐
zhanglinsen123的博客
06-16 3万+
uniapp之常用提示弹框
uniapp 自定义弹窗组件
一根火柴博客
02-18 2251
先上效果： 组件源码：slot-modal.vue <template> <view class="modal-container" v-if="show" @click.stop="cancel(2)"> <view class="modal-content"> <view class="modal-head modal-title-padding"> <slot name="modal-head"></slot&gt
uni-app tabbar和uni-popup 同级问题
05-25
在uni-app中，tabbar和popup是两个不同的组件，它们默认是同级的。如果你想要让popup显示在tabbar之上，可以通过设置popup组件的z-index属性来实现。例如，将popup的z-index设置为999，将tabbar的z-index设置为1，就可以让popup显示在tabbar之上。具体的代码可以参考下面的示例： ```html <template> <view> <uni-tabbar :tab-list="tabList" /> <uni-popup :show="showPopup" :z-index="999"> <view>popup content</view> </uni-popup> </view> </template> <script> export default { data() { return { tabList: [ { text: 'Home', iconPath: '/static/home.png' }, { text: 'Settings', iconPath: '/static/settings.png' }, ], showPopup: false, } }, methods: { openPopup() { this.showPopup = true }, closePopup() { this.showPopup = false }, }, } </script> <style> /* 设置tabbar的z-index为1 */ .uni-tabbar { z-index: 1; } </style> ``` 在这个示例中，我们将tabbar的z-index设置为1，将popup的z-index设置为999，这样就可以让popup显示在tabbar之上。当需要显示popup时，只需要将showPopup设置为true即可。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值