admin 管理员组

文章数量: 887007

微信小程序模态框

微信小程序模态框：

项目开发时很多页面都需要用到弹框，弹框展示内容都不一致，为了方便，自己自定义了弹框组件

组件界面：


可以扫码查看是否符合自己的需求

wxml：

<!--components/dialog/index.wxml-->
<view wx:if="{{ showDialog }}" class="dialog-container"><view class="dialog-bg" style="opacity: {{ isOpen ? 1 : 0 }}"></view><view class="dialog-body" style="background-color: {{ bodyBg }}; border-radius: {{ bodyBg == 'transparent' ? '0' : '16rpx' }}; width: {{ width }}; top: {{ top }}; opacity: {{ isOpen ? 1 : 0 }}; transition: all ease-in-out 0.2s; transform: {{ isOpen ? 'scale(1)' : 'scale(0.3)' }};"><view class="dialog-icon-close" style="color: {{ bodyBg == 'transparent' ? '#ffffff' : '#000000' }};" bindtap="handleClose">×</view><view class="dialog-content"><slot></slot></view></view>
</view>

js：

// components/dialog/index.js
Component({/*** 组件的属性列表*/properties: {showDialog: {type: Boolean,value: false,observer(newData, oldData) {if (newData) {setTimeout(() => {this.setData({isOpen: newData})}, 20)} else {this.setData({isOpen: false})}}},showClose: {type:Boolean,value: true},bodyBg: {type: String,value: 'transparent'},width: {type: String,value: '60%'},top: {type: String,value: '20%'},},/*** 组件的初始数据*/data: {isOpen: false},/*** 组件的方法列表*/methods: {handleClose() {this.triggerEvent('close')}}
})

wxss：

/* components/dialog/index.wxss */
.dialog-container{
}
.dialog-bg{position: fixed;left: 0;right: 0;top: 0;bottom: 0;background-color: rgba(0, 0, 0, 0.6);
}
.dialog-body{position: fixed;left: 0;right: 0;margin: auto;z-index: 100;
}
.dialog-icon-close{position: absolute;right: 10rpx;top: 0;font-size: 60rpx;line-height: 1;
}
.dialog-content{max-height: 80vh;min-height: 200rpx;overflow: auto;
}

使用：

  1. json文件
 "usingComponents": {"dialog": "../../components/dialog"}
  1. wxml文件
<dialog showDialog="{{ showDialog }}" top="15%" width="80%" bodyBg="#ffffff" bindclose="handleCloseDialog">自定义内容
</dialog>
  1. js 文件中
  // 打开弹窗handleOpenDialog() {this.setData({showDialog: true})},// 关闭弹窗handleCloseDialog() {this.setData({showDialog: false})},

本文标签： 微信小程序模态框

版权声明：本文标题：微信小程序模态框 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1732353281h1533706.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。