微信小程序实现简易封装弹窗
程序员文章站
2022-06-16 13:26:08
本文实例为大家分享了微信小程序实现简易封装弹窗的具体代码,供大家参考,具体内容如下1.建立组件文件夹2.编写组件内容
本文实例为大家分享了微信小程序实现简易封装弹窗的具体代码,供大家参考,具体内容如下
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.js 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); -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") } })
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。