当前位置:网站首页>uniapp uni-popup change
uniapp uni-popup change
2022-07-16 00:44:00 【nicepainkiller】
uniapp uni-popup change 记录一个小功能
监听 pop 页面的显示与隐藏;
<template>
<uni-popup ref="popup" type="bottom" background-color="#ffffff" @change="change" @maskClick="maskClick">
<view class="pop-content">
<view class="audio-top">
<view class="top-left" @click="onCancel()">
取消
</view>
<view class="top-right" @click="onComfirm()">
完成
</view>
</view>
<view class="audio-conetnt">
<image src="/static/animation/audio-record-pink.gif" mode=""></image>
</view>
</view>
</uni-popup>
</template>
<script>
export default {
data() {
return {
eventStartAudio: 'safetydetial-startaudio',
eventCancelAudio: 'recordaduio-cancelaudio',
eventStopAudio: 'recordaduio-stopaudio',
timer: null,
}
},
mounted() {
console.log("pop mounted")
uni.$on(this.eventStartAudio, args => {
this.onOpen()
})
},
methods: {
onOpen() {
this.$refs.popup.open()
},
change(e) {
console.log("closeMask:", e)
// 显示或者隐藏的时候都 清除定时器
if (this.timer) {
clearTimeout(this.timer)
this.timer = null
}
//显示的时候启动定时器
if (e.show) {
this.timer = setTimeout(() => {
this.onComfirm()
}, 5 * 1000);
}
},
maskClick() {
console.log("maskClick")
uni.$emit(this.eventCancelAudio)
},
onCancel() {
console.log("onCancel")
this.$refs.popup.close()
uni.$emit(this.eventCancelAudio)
},
onComfirm() {
console.log("onComfirm")
this.$refs.popup.close()
uni.$emit(this.eventStopAudio)
}
},
destroyed() {
uni.$off(this.eventStartAudio)
}
}
</script>
<style lang="scss" scoped>
.pop-content {
width: 100%;
height: 350rpx;
background-color: #ffffff;
display: flex;
flex-direction: column;
align-items: center;
.audio-top {
width: 100%;
height: 80rpx;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
font-size: 28rpx;
border-bottom: 1px solid #dddddd;
.top-left {
margin-left: 24rpx;
padding: 2px 8rpx;
border: 1px solid #1D69F9;
border-radius: 6rpx;
}
.top-right {
margin-right: 24rpx;
padding: 2px 8rpx;
border: 1px solid #1D69F9;
border-radius: 6rpx;
}
}
.audio-conetnt {
flex: 1;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
image {
width: 200rpx;
height: 200rpx;
}
}
}
</style>
边栏推荐
- 【pytorch】线性神经网络
- 无线通信安全作业1-无线通信安全最新消息
- 如何基于知识图谱技术构建现代搜索引擎系统、智能问答系统、智能推荐系统?
- [C language] string function and memory operation function
- JSD-2204-MVC-微博项目-Day15
- Solve the nail alarm notification in the Intranet Environment -- the road of building a dream
- Redis profile
- Vertical/Column text select in PyCharm
- CentOS fail2ban security protection reinforcement - the road to building a dream
- Memory management: memory allocation and recycling
猜你喜欢

一道极限题目

mysql原字段转驼峰命名

【语音增强】基于matlab多维谱自适应小波语音信号去噪【含Matlab源码 1972期】

Wireless communication safety operation 1- latest news of wireless communication safety

Uboot adds hardware watchdog

mysql json字段查询

【VSCode】切换文件与编辑器的快捷键

浅析websocket劫持

Take you to brush (niuke.com) C language hundred questions (the next day)

【微信小程序】幻灯片效果实现
随机推荐
Take you to brush (niuke.com) C language hundred questions (the next day)
YGG 成立了新的 SubDAO——YGG日本
Redis入门
[C language] implementation of static address book
Professional qualities of network security practitioners
Getting started with redis
三级分类的数据表设计和构造API数据
How to write each part of the thesis well?
Mobile layout - fit
[Load balancer does not contain an instance for the service mall-coupon]和项目正常启动但注册不上nacos
【pytorch】简单的线性回归模型
上位机开发——数据库系列问题一网打尽
【微信小程序】幻灯片效果实现
mysql原字段转驼峰命名
map集合转对象,map字段有横线,对象转map
【图像融合】基于matlab DCT域多焦点图像融合【含Matlab源码 1973期】
每日学习Redis——拿捏Redis中的通用指令(键和数据库通用指令)
WinForm + C GDI + programming to realize Photoshop, illustrator similar drawing toolbox
TypeScript学习总结
第1章:初识数据库与MySQL----MySQL安装
