uniapp中uni-popup的具体使用
uni-pop弹出层组件，在应用中弹出一个消息提示窗口、提示框等,可以设置弹出层的位置，是中间、底部、还是顶部。
如下图效果所示：白色区域则为弹出的pop层。
一、 创建一个自定义组件：
1.项目中安装下载uni-pop插件。
2.把pop内容单独写个组件。这里放到 components下。 type="bottom"指的pop展示所在屏幕的位置。
<template>
<view>
<uni-popup ref="cityPhonePop" type="bottom">
<view class="popup-content">
<view class="contentPop columnPop">
<block v-for="(item,index) in array">
<view class="columnPop itemPop" @click="callPhone(item)">
<text>{{item.name}}：{{item.phone}}</text>
</view>
</block>
<view style="background:#f3f3f3;height:10rpx;width: 100%;"></view>
<view
style="min-height: 70rpx;display: flex; align-items: center;width: 100%;justify-content: center;"
@click="closeInfoPop">
<text>取消</text>
</view>
</view>
</view>
</uni-popup>
</view>
</template>在methods里面定义，用到的js方法：
methods: {
closeInfoPop() {
this.$refs.cityPhonePop.close()
},
//拨打电话
callPhone(item) {
var that = this;
uni.makePhoneCall({
phoneNumber: item.phone,
// phoneNumber: '025-83582006',
success: (res) => {
console.log('调用成功!')
that.closeInfoPop();
},
fail: (res) => {
console.log('调用失败!')
}
});
},
open() {
//cityPhonePop是上面布局定义的uni-pop 的ref后面的名称， this.$refs.cityPhonePop.open()则打开pop展示。
this.$refs.cityPhonePop.open()
},
close() {
this.$refs.cityPhonePop.close()
}
}此组件则定义完成。
二、页面中使用上面创建的自定义组件：
1.先引入组件,并在components中声明,则可以用cityPhone此组件了。
import cityPhone from "@/components/cityPhone.vue"
export default {
components: {
cityPhone
},
<script>
import cityPhone from "@/components/cityPhone.vue"
export default {
components: {
cityPhone
},
},
methods: {
cityList: function() {
this.$refs.phonePop.open()
}
}
</scripty>2.页面中使用此组件
<template>
<view>
<view @click="cityList()" style="padding:0;margin:0;background-color: #FFFFFF;"
class="member-benefits-1">
地市列表
</view>
<!--城市选择弹窗 -->
<cityPhone ref="phonePop"></cityPhone>
</view>
</template>3.展示pop。则点击地市列表,触发 cityList方法。此方法打开pop。
this.$refs.phonePop.open()
phonePop是上面2布局中cityPhone组件中，ref后面跟的名称。
this.$refs.phonePop.open() //此open方法实际上是调用的。组件中的open方法，即下图方法。
open() {
//cityPhonePop是上面布局定义的uni-pop 的ref后面的名称，即pop名 this.$refs.cityPhonePop.open()则打开pop展示。
this.$refs.cityPhonePop.open()
},三、pop组件，扩展详情说明
1.pop位置，可以布局中设置type，同时可以打开pop的时候参数中传入位置。
// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
this.$refs.popup.open('top')2. 设置主窗口背景色
大多数场景下，并不需要设置 background-color 属性,
而也有特例，需要我们主动去设置背景色，例如 type = 'bottom' 的时候 ，在异型屏中遇到了底部安全区问题（如 iphone 11），因为 uni-popup的主要内容避开了安全区（设置safe-area:true），导致底部的颜色我们无法自定义，这时候使用 background-color 就可以解决这个问题。
<button @click="open">打开弹窗</button> <uni-popup ref="popup" type="bottom" background-color="#fff">底部弹出 Popup</uni-popup>
3.禁用打开动画
在某些场景 ，可能不希望弹层有动画效果 ，只需要将 animation 属性设置为 false 即可以关闭动画。
<button @click="open">打开弹窗</button> <uni-popup ref="popup" type="center" :animation="false">中间弹出 Popup</uni-popup>
4.禁用点击遮罩关闭
默认情况下，点击遮罩会自动关闭uni-popup，如不想点击关闭，只需将mask-click设置为false，这时候要关闭uni-popup，只能手动调用 close 方法。
<uni-popup ref="popup" :mask-click="false">
<text>Popup</text>
<button @click="close">关闭</button>
</uni-popup>到此这篇关于uniapp中uni-popup的具体使用的文章就介绍到这了,更多相关uniapp uni-popup内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
下面小编就为大家带来一篇Js+Ajax,Get和Post在使用上的区别小结。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
下面小编就为大家带来一篇js 判断一组日期是否是连续的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-07-07
使用 JScript 创建 .exe 或 .dll 文件的方法
JScript 是由微软开发的活动脚本语言，基于 ECMAScript 规范实现。Internet Explorer 中的 JavaScript，实际上是指 JScript。2011-07-07
其实，没那么强大的，不过，聊胜于无吧，并且还算管用，要是有谁再完善它就好了……2009-04-04
这篇文章主要给大家介绍了关于uniapp调用手机相机进行拍照的两种方式,在uniapp中有多种方式可以调用相机进行拍照,文中介绍了两种方法,需要的朋友可以参考下2023-09-09
这篇文章主要给大家介绍了关于如何手动实现es5中的bind方法的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面小编来一起学习学习吧2018-12-12
这篇文章主要为大家详细介绍了Bootstrap列表组的学习使用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
这篇文章主要介绍了JS+CSS实现可拖拽的漂亮圆角特效弹出层,以完整实例形式分析了弹出层特效及圆角矩形的实现技巧,需要的朋友可以参考下2015-02-02
这篇文章主要介绍了javascript删除一个html元素节点的方法,可通过获取父节点再查找并删除子节点来实现该功能,具有一定的参考借鉴价值,需要的朋友可以参考下2014-12-12
这篇文章主要介绍了js鼠标悬浮出现遮罩层的方法,以实例形式较为详细的分析了html及css页面布局与js特效的实现方法,是非常实用的技巧,需要的朋友可以参考下2015-01-01
最新评论