微信小程序?qū)崿F(xiàn)簡易封裝彈窗

更新時間：2022年05月23日 13:31:02 作者：林鹿海鯨夢你

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

本文實例為大家分享了微信小程序?qū)崿F(xiàn)簡易封裝彈窗的具體代碼，供大家參考，具體內(nèi)容如下

1.建立組件文件夾

2.編寫組件內(nèi)容

?<!--index.wxml-->
<view class="container">
? <text>demo 01 heihzi</text>
? <view bindtap="onDialog">點擊 打開彈窗</view>
</view>
<dialog id="dialog" title="查看詳情">
? <scroll-view class="p-b min-ht" scroll-y style="height: 700rpx;">
? ? <view class="dia-warp">
? ? ? <text>詳情信息</text>
? ? ? <view wx:for="{{20}}" wx:key="index">{{item}}</view>
? ? </view>
? </scroll-view>
</dialog>

// components/dialong/index.js
Component({
? /**
? ?* 組件的屬性列表
? ?*/
? properties: {
? ? title: {
? ? ? type: String
? ? }
? },

? /**
? ?* 組件的初始數(shù)據(jù)
? ?*/
? data: {
? ? show: false,
? ? zIndex: 0,
? ? ablClickMask: true,
? ? hasClsBtn: false,
? ? title: ''
? },

? /**
? ?* 組件的方法列表
? ?*/
? methods: {
? ? open(params, cb, fb) {
? ? ? params = params || {}
? ? ? this.setData({
? ? ? ? show: true,
? ? ? ? zIndex: params.zIndex || 0
? ? ? })
? ? ? this.data._cb = cb
? ? ? this.data._fb = fb
? ? },
? ? close() {
? ? ? this.setData({
? ? ? ? show: false
? ? ? })
? ? },
? ? onMaskHide() {
? ? ? if (this.data.ablClickMask) {
? ? ? ? this.close()
? ? ? ? this.triggerEvent('maskEvt')
? ? ? }
? ? }
? }
})

樣式一定要加不然組件彈窗出不來

/* components/dialong/index.wxss */
/* 彈窗 */

.pop {
? width: 80%;
? background: #fff;
? border-radius: 12rpx;
? height: auto;
? max-height: 70vh;
? margin: auto;
? position: absolute;
? position: fixed;
? left: 0;
? right: 0;
? top: 20vh;
? opacity: 0;
? overflow: hidden;
? transform: scale(0.5, 0.5);
? -webkit-transform: scale(0.5, 0.5);
? transition: all 0.2s ease;
? -webkit-transition: all 0.2s ease;
}

.pop-enter {
? opacity: 1;
? transform: scale(1, 1);
? -webkit-transform: scale(1, 1);
? z-index: 1000;
}

.mask {
? width: 100vw;
? height: 100vh;
? box-sizing: border-box;
? background: rgba(0, 0, 0, 0.6);
? position: fixed;
? top: 0;
? bottom: 0;
? left: 0;
? right: 0;
? z-index: 700;
}

.title {
? text-align: center;
? padding: 20rpx 0;
? border-bottom: 1rpx solid #CCC;
}

組件的引入 index .json

?"usingComponents" : {
? ? "dialog" : "/components/dialong/index"
? },

3.頁面中使用

<!--index.wxml-->
<view class="container">
? <text>demo 01 heihzi</text>
? <view bindtap="onDialog">點擊 打開彈窗</view>
</view>
<dialog id="dialog" title="查看詳情">
? <scroll-view class="p-b min-ht" scroll-y style="height: 700rpx;">
? ? <view class="dia-warp">
? ? ? <text>詳情信息</text>
? ? ? <view wx:for="{{20}}" wx:key="index">{{item}}</view>
? ? </view>
? </scroll-view>
</dialog>

//index.js
//獲取應用實例
const app = getApp()
Page({
? data: {
? },
? onLoad: function () {
??
? },
? onDialog () {
? ? console.log('打開我啊')
? ? this.dialog.open()
? },
? onReady () {
? ? this.dialog = this.selectComponent("#dialog")
? }
})

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: