小程序自定义弹出框效果
作者:蔬菜_
这篇文章主要为大家详细介绍了小程序自定义弹出框效果,支持淡入淡出动画,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了小程序自定义弹出框效果的具体代码,供大家参考,具体内容如下
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": {} }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。