这篇文章讲解一下微信小程序自定义弹出窗,模拟wx.showModal的一个简单实现,来解决wx.showModal无法换行,无法自定义的问题
首先看一下样式结果
好,直接上代码
wxml代码
<button catchtap="show">显示</button> <view class="sjn-modal {{showModal?'show':''}}"> <view class="sjn-dialog"> <view class="sjn-dialog-title">提示</view> <text>1、这是文本 1、这是文本 1、这是文本 1、这是文本 1、这是文本 1、这是文本 </text> <view class="sjn-btn" catchtap="close"> 确定 </view> </view> </view>
wxss代码
.sjn-modal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1110; opacity: 0; outline: 0; text-align: center; -ms-transform: scale(1.185); transform: scale(1.185); backface-visibility: hidden; perspective: 2000rpx; background: rgba(0, 0, 0, 0.6); transition: all 0.3s ease-in-out 0s; pointer-events: none; } .sjn-modal::before { content: "\200B"; display: inline-block; height: 100%; vertical-align: middle; } .sjn-modal.show { opacity: 1; transition-duration: 0.3s; -ms-transform: scale(1); transform: scale(1); overflow-x: hidden; overflow-y: auto; pointer-events: auto; } .sjn-dialog { position: relative; display: inline-block; vertical-align: middle; margin-left: auto; margin-right: auto; width: 680rpx; max-width: 100%; background-color: #f8f8f8; border-radius: 10rpx; overflow: hidden; } .sjn-btn { position: relative; align-items: center; min-height: 100rpx; background-color: #fff; text-align: center; line-height: 100rpx; color: green; } .sjn-dialog-title{ text-align: center; background-color: #fff; font-weight: bold; line-height: 100rpx; }
js中的事件代码
Page({ /** * 页面的初始数据 */ data: { showModal:false }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, //隐藏 close:function() { this.setData({ showModal:false }) }, //显示 show:function(){ this.setData({ showModal:true }) } })