Shulou(Shulou.com)06/02 Report--

Today, I would like to talk to you about how WeChat Mini Programs realizes the simple packaging pop-up window, which may not be well understood by many people. in order to make you understand better, the editor has summarized the following contents for you. I hope you can gain something according to this article.

1. Create a component folder

two。 Write component content

Demo 01 heihzi Click to open the pop-up window details {{item}} / components/dialong/index.jsComponent (property list of {/ * component * / properties: {title: {type: String}}, / * initial data of the component * / data: {show: false, zIndex: 0, ablClickMask: true HasClsBtn: false, title:''}, / * component method list * / 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')})

The style must be added, or the component pop-up window will not come out.

/ * components/dialong/index.wxss * / / * pop-up window * / .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;}

Introduction of components index .json

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

3. Use in the page

Demo 01 heihzi Click to open the pop-up window details {{item}} / / index.js// to get the application instance const app = getApp () Page ({data: {}, onLoad: function () {}, onDialog () {console.log ('Open me') this.dialog.open ()}) OnReady () {this.dialog = this.selectComponent ("# dialog")}) finish reading the above content Do you have any further understanding of how WeChat Mini Programs realizes the simple package pop-up window? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.