快捷導(dǎo)航

微信小程序?qū)崿F(xiàn)點(diǎn)擊出現(xiàn)彈窗

更新時(shí)間：2022年07月06日 16:23:17 作者：神的少女光芒萬丈

這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)點(diǎn)擊出現(xiàn)彈窗，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)點(diǎn)擊出現(xiàn)彈窗的具體代碼，供大家參考，具體內(nèi)容如下

1.現(xiàn)在page文件里面定義一個(gè)dh的文件，然后在component定義一個(gè)可復(fù)用的組件為dislog

然后在dh的json文件中引入這個(gè)組件

{
? "usingComponents": {
? ? "dialog":"../../component/dialog/index"
? ??? ??? ? }
? ? }

2.dh中.js文件

// pages/dh/index.js
Page({

? data: {
? ? status:false
? },
? handleTap(){
? ? this.setData({
? ? ? status:true
? ? })
? },
? handlecancel(){
? ? this.setData({
? ? ? status:false
? ? })
? },
? handleConfirm(){
? ? this.setData({
? ? ? status:false
? ? })
? }
})

.wxml文件中

<dialog title="警告" status="{{status}}" bind:cancel='handlecancel' bind:confirm="handleConfirm" content='啦啦啦我也不知道這什么哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈'>
? <image src='//gw.alicdn.com/imgextra/i1/O1CN016q4k5T1IPNCZM2RTx_!!6000000000885-0-tps-640-260.jpg_Q75.jpg'></image>

</dialog>
<view bindtap='handleTap' class='show'>顯示</view>

.wxss文件

/* pages/dh/index.wxss */
.show{
? /* width:100%;
? height:100vh; */
? width:200rpx;
? height:140rpx;
? background:#ccc;
? border-radius:20rpx;
? color:#fff;
? text-align:center;
? line-height:140rpx;
? font-size:40rpx;
? margin:0 auto;
? margin-top:470rpx;
}

在組件中dialog文件中
index.js文件

// component/dialog/index.js
Component({
? /**
? ?* 組件的屬性列表
? ?*/
? properties: {
? ? title:{
? ? ? type:String,
? ? ? value:"標(biāo)題"
? ? },
? ? content:String,
? ? status:{
? ? ? type:Boolean,
? ? ? value:false,

? ? }
? },

? /**
? ?* 組件的初始數(shù)據(jù)
? ?*/
? data: {

? },

? /**
? ?* 組件的方法列表
? ?*/
? methods: {
? ? handleCancel(){
? ? ? this.triggerEvent("cancel")
? ? },
? ? handleConfirm(){
? ? ? // this.triggerEvent('confirm')
? ? ? ? this.triggerEvent('confirm')
? ? }
? }
})

wxml文件

<view class="mask" wx:if="{{status}}">
? <view class="dialog">
? ? <view class="dialog-header">
? ? ? ? {{title}}
? ? </view>
? ? <view class="dialog-body">
? ? ? <view wx:if="{{content}}" class='content'>{{content}}</view>
? ? ? <slot></slot>
? ? </view>
? ? <view class="dialog-footer">
? ? ? <view class="dialog-btn" bindtap='handleCancel'>取消</view>
? ? ? <view class="dialog-btn" bindtap='handleConfirm'>確認(rèn)</view>
? ? </view>
? </view>
</view>

wxss文件

.mask{
? position:fixed;
? top:0;
? left:0;
? right:0;
? bottom:0;
? background-color:rgb(0,0,0,0.3);
? display:flex;
? align-items: center;
? justify-content:center;
}
.dialog{
? width:600rpx;
? height:auto;
? background:#fff;
? border-radius:30rpx;
}
.dialog-header{
? padding:30rpx 0;
? text-align:center;
? font-size:36rpx;

}
.dialog-footer{
? display:flex;
}
.dialog-btn{
? flex:1;
? text-align:center;
? padding:40rpx 0;
? border-top:1rpx solid #eee;
}
.dialog-btn:first-child{
? border-right:1rpx solid #eee;
}
.dialog-body{
? padding:30rpx;

}
.content {
? text-indent: 72rpx;
? color:#333;
}
.dialog-body image{
? width:100%;

}

這樣就可以實(shí)現(xiàn)一個(gè)簡(jiǎn)單的點(diǎn)擊出現(xiàn)彈窗的效果。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: