小程序自定義彈出框效果
更新時(shí)間：2022年07月18日 16:15:00 作者：蔬菜_
這篇文章主要為大家詳細(xì)介紹了小程序自定義彈出框效果，支持淡入淡出動(dòng)畫(huà)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了小程序自定義彈出框效果的具體代碼，供大家參考，具體內(nèi)容如下
my-pop----api：
title ------字符串---------自定義彈窗標(biāo)題
context ------字符串---------自定義彈窗內(nèi)容
cancelTxt ------字符串---------取消按鈕文本
cancelCor ------字符串---------取消按鈕顏色
inp ------布爾值---------true文本彈出框---------fasle默認(rèn)彈出框
okTxt ------字符串---------確定按鈕文字
okCor ------字符串---------確定按鈕顏色
@cancel ------事件---------點(diǎn)擊取消按鈕事件可攜帶value參數(shù)
@ok ------事件---------點(diǎn)擊確定按鈕事件可攜帶value參數(shù)
//使用方法
//在目標(biāo)文件json文件里引入該組件
"usingComponents": {
? ? "mypop":"/components/my-pop"
?}
<mypop id="mypop" context="測(cè)試一下主體" inp="{{true}}" bindok="ok"/>
//給組件一個(gè)id?
this.selectComponent("#mypop").openPop(); ? //打開(kāi)彈窗
ok(e) ?//點(diǎn)擊確定觸發(fā) 如果是inp類(lèi)型彈窗 e 就是input的value ， 反之e為空串
cancel(e) //點(diǎn)擊取消觸發(fā) ?如果是inp類(lèi)型彈窗 e 就是input的value ?， 反之e為空串彈窗js文件:
Component({
? /**
? ?* 組件的屬性列表
? ?*/
? properties: {
? ? title: {
? ? ? type: String,
? ? ? value: '默認(rèn)標(biāo)題',?
? ? },
? ? context: {
? ? ? type: String,
? ? ? value: '默認(rèn)內(nèi)容',?
? ? },
? ? inp:{
? ? ? type: Boolean,
? ? ? value: true
? ? },
? ? cancelTxt: {
? ? ? type: String,
? ? ? value: '取消',?
? ? },
? ? cancelCor:{
? ? ? type:String,
? ? ? value:'black'
? ? },
? ? okTxt: {
? ? ? type: String,
? ? ? value: '確認(rèn)',?
? ? },
? ? okCor:{
? ? ? type:String,
? ? ? value:'red'
? ? },
? },
? /**
? ?* 組件的初始數(shù)據(jù)
? ?*/
? 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": {}
}以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
淺析js實(shí)現(xiàn)網(wǎng)頁(yè)截圖的兩種方式
這篇文章主要介紹了淺析js實(shí)現(xiàn)網(wǎng)頁(yè)截圖的兩種方式，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
在編程中，模塊是指將相關(guān)的代碼封裝在一起，形成一個(gè)獨(dú)立的單元，在這篇文章中，我們將深入探討在TypeScript中如何定義、導(dǎo)入和導(dǎo)出模塊，感興趣的可以了解一下2023-06-06
js函數(shù)中有三個(gè)在特定場(chǎng)合很好用的函數(shù):reduce(),map(),filter()。而數(shù)組經(jīng)常用到的方法有push、join、indexOf、slice等等，但是有一個(gè)經(jīng)常被我們忽略的方法：reduce，這個(gè)方法簡(jiǎn)直強(qiáng)大的不要不要的。下面通過(guò)這篇文章來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2016-12-12
Js遍歷鍵值對(duì)形式對(duì)象或Map形式的方法
下面小編就為大家?guī)?lái)一篇Js遍歷鍵值對(duì)形式對(duì)象或Map形式的方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08
本篇文章主要介紹了js和jquery中獲取非行間樣式的相關(guān)知識(shí)，具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-05-05
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)漂亮的星空背景，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-11-11
javascript函數(shù)的call、apply和bind的原理及作用詳解
javascript函數(shù)的call、apply和bind?本質(zhì)是用來(lái)實(shí)現(xiàn)繼承的，專(zhuān)業(yè)點(diǎn)說(shuō)法就是改變函數(shù)體內(nèi)部this的指向，當(dāng)一個(gè)對(duì)象沒(méi)有某個(gè)功能時(shí)，就可以用這3個(gè)來(lái)從有相關(guān)功能的對(duì)象里借用過(guò)來(lái)，文中通過(guò)代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05
今天小編就為大家分享一篇關(guān)于JSON.stringify()方法講解，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧2019-01-01
這篇文章主要介紹了iscroll實(shí)現(xiàn)下拉刷新功能的相關(guān)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
Bootstrap與KnockoutJs相結(jié)合實(shí)現(xiàn)分頁(yè)效果實(shí)例詳解
KnockoutJS是一個(gè)JavaScript實(shí)現(xiàn)的MVVM框架。接下來(lái)通過(guò)本文給大家介紹Bootstrap與KnockoutJs相結(jié)合實(shí)現(xiàn)分頁(yè)效果，對(duì)bootstrap knockoutjs相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2016-05-05