小程序自定义弹出框效果小程序自定义弹出框效果

本文实例为大家分享了小程序自定义弹出框效果的具体代码，供大家参考，具体内容如下

文章图片

【小程序自定义弹出框效果】
文章图片

my-pop----api：
title ------字符串---------自定义弹窗标题
context ------字符串---------自定义弹窗内容
cancelTxt ------字符串---------取消按钮文本
cancelCor ------字符串---------取消按钮颜色
inp ------布尔值---------true文本弹出框---------fasle默认弹出框
okTxt ------字符串---------确定按钮文字
okCor ------字符串---------确定按钮颜色
@cancel ------事件---------点击取消按钮事件可携带value参数
@ok ------事件---------点击确定按钮事件可携带value参数

//使用方法//在目标文件json文件里引入该组件"usingComponents": {"mypop":"/components/my-pop" }//给组件一个id this.selectComponent("#mypop").openPop(); //打开弹窗ok(e)//点击确定触发如果是inp类型弹窗 e 就是input的value ，反之e为空串cancel(e) //点击取消触发如果是inp类型弹窗 e 就是input的value，反之e为空串

弹窗js文件:

Component({/*** 组件的属性列表*/properties: {title: {type: String,value: '默认标题', },context: {type: String,value: '默认内容', },inp:{type: Boolean,value: true},cancelTxt: {type: String,value: '取消', },cancelCor:{type:String,value:'black'},okTxt: {type: String,value: '确认', },okCor:{type:String,value:'red'},},/*** 组件的初始数据*/data: {show:false,animation:'',animationPop:'',inpVal:''},methods: {bindinput(e){let {value} = e.detailthis.setData({inpVal:value})},ok(){this.triggerEvent("ok",this.data.inpVal); this.hidePop()this.setData({inpVal:''})},cancel(){this.triggerEvent("cancel",this.data.inpVal); this.hidePop()this.setData({inpVal:''})},openPop(){var animation = wx.createAnimation({duration: 200,timingFunction: "linear",delay: 0})this.animation = animationanimation.opacity(0).step()this.setData({animationData: animation.export(),show:true})setTimeout(function () {animation.opacity(1).step()this.setData({animationData: animation.export()})}.bind(this), 200)},hidePop(){var animation = wx.createAnimation({duration: 200,timingFunction: "linear",delay: 0})this.animation = animationanimation.opacity(0).step()this.setData({animationData: animation.export()})setTimeout(function () {this.setData({show:false})}.bind(this), 200)}}})

弹窗wxml文件:

{{title}}{{context}}{{cancelTxt}}{{okTxt}}

弹窗wxss文件:

.mask{width: 100%; height: 100vh; position: fixed; top: 0; left: 0; z-index: 100; background: rgba(0, 0, 0, 0.4); display: flex; align-items: center; justify-content: center; }.content{background: #FFFFFF; border-radius: 16rpx; width: 70%; }.title{padding: 32rpx 0rpx; text-align: center; font-weight: 500; font-size: 32rpx; color: black; }.txt{color: #000000; font-size: 24rpx; text-align: center; margin-bottom: 32rpx; }.btnView{border-top: 1rpx solid #D4D6D8; display: flex; align-items: center; justify-content: space-around; }.cancel{width: 49%; display: flex; align-items: center; justify-content: center; height: 80rpx; line-height: 80rpx; }.ok{width: 49%; display: flex; align-items: center; justify-content: center; height: 80rpx; line-height: 80rpx; }.inp{text-align: center; padding: 5px 0px; font-size: 24rpx; margin: auto; color: #868686; width: 90%; border: 1.2px solid #DEDEDE; border-radius: 5px; margin-bottom: 32rpx; }.op5{opacity: .5; background: rgba(0,0,0,0.05); }.partition{width: 2rpx; height: 80rpx; background: #D4D6D8; }

弹窗json文件: