小程序自定义弹出框效果

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

my-pop----api：

title ------字符串---------自定义弹窗标题
context ------字符串---------自定义弹窗内容
cancelTxt ------字符串---------取消按钮文本
cancelCor ------字符串---------取消按钮颜色
inp ------布尔值---------true文本弹出框---------fasle默认弹出框
okTxt ------字符串---------确定按钮文字
okCor ------字符串---------确定按钮颜色

@cancel ------事件---------点击取消按钮事件可携带value参数
@ok ------事件---------点击确定按钮事件可携带value参数

//使用方法
//在目标文件json文件里引入该组件
"usingComponents": {
? ? "mypop":"/components/my-pop"
?}

<mypop id="mypop" context="测试一下主体" inp="{{true}}" bindok="ok"/>
//给组件一个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.detail
? ? ? this.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 = animation
? ? ? animation.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 = animation
? ? ? animation.opacity(0).step()
? ? ? this.setData({
? ? ? ? animationData: animation.export()
? ? ? })
? ? ? setTimeout(function () {
? ? ? ? ? this.setData({
? ? ? ? ? ? ? show:false
? ? ? ? ? })
? ? ? }.bind(this), 200)
? ? }
? }
})

弹窗wxml文件:

<!--components/my-pop.wxml-->
<view>
? <view class="mask" animation="{{animationData}}" bindtap="hidePop" wx:if="{{show}}">
? ? <view class="content" animation="{{animationPop}}" catchtap >
? ? ? <view class="title">{{title}}</view>
? ? ? <view class="txt" wx:if="{{!inp}}">{{context}}</view>
? ? ? <view class="inp" wx:if="{{inp}}">
? ? ? ? <input type="text" value='{{inpVal}}' bindinput="bindinput" name="" id="" />
? ? ? </view>
? ? ? <view class="btnView">
? ? ? ? <view class="cancel" hover-class="op5" bindtap="cancel" style="color:{{cancelCor}}">{{cancelTxt}}</view>
? ? ? ? <view class="partition"></view>
? ? ? ? <view class="ok" hover-class="op5" bindtap="ok" style="color:{{okCor}}">{{okTxt}}</view>
? ? ? </view>
? ? </view>
? </view>
</view>

弹窗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文件:

{
? "component": true,
? "usingComponents": {}
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

查看更多关于小程序自定义弹出框效果的详细内容...