微信小程式實現簡易封裝彈窗_程式設計

本文例項為大家分享了微信小程式實現簡易封裝彈窗的具體程式碼，供大家參考，具體內容如下

微信小程式實現簡易封裝彈窗

1.建立元件資料夾

微信小程式實現簡易封裝彈窗

2.編寫元件內容

<!--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.
Component({
 /**
 * 元件的屬性列表
 */
 properties: {
  title: {
   type: String
  }
 },/**
 * 元件的初始資料
 */
 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)rtYparaOl;
 -webkit-transform: scale(0.5,0.5);
 transition: all 0.2s ease;
 -webkit-transition: all 0.2s ease;
}

.pop-enter {
 opacityhttp://www.cppcns.com: 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.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")
 }
})

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。

微信小程式實現簡易封裝彈窗

相關推薦