微信小程序点击出现弹窗
神的少女光芒万丈 人气:01.现在page文件里面定义一个dh的文件,然后在component定义一个可复用的组件为dislog
然后在dh的json文件中引入这个组件
{ "usingComponents": { "dialog":"../../component/dialog/index" } }
2.dh中.js文件
// pages/dh/index.js Page({ data: { status:false }, handleTap(){ this.setData({ status:true }) }, handlecancel(){ this.setData({ status:false }) }, handleConfirm(){ this.setData({ status:false }) } })
.wxml文件中
<dialog title="警告" status="{{status}}" bind:cancel='handlecancel' bind:confirm="handleConfirm" content='啦啦啦我也不知道这什么哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈'> <image src='//gw.alicdn.com/imgextra/i1/O1CN016q4k5T1IPNCZM2RTx_!!6000000000885-0-tps-640-260.jpg_Q75.jpg'></image> </dialog> <view bindtap='handleTap' class='show'>显示</view>
.wxss文件
/* pages/dh/index.wxss */ .show{ /* width:100%; height:100vh; */ width:200rpx; height:140rpx; background:#ccc; border-radius:20rpx; color:#fff; text-align:center; line-height:140rpx; font-size:40rpx; margin:0 auto; margin-top:470rpx; }
在组件中dialog文件中
index.js文件
// component/dialog/index.js Component({ /** * 组件的属性列表 */ properties: { title:{ type:String, value:"标题" }, content:String, status:{ type:Boolean, value:false, } }, /** * 组件的初始数据 */ data: { }, /** * 组件的方法列表 */ methods: { handleCancel(){ this.triggerEvent("cancel") }, handleConfirm(){ // this.triggerEvent('confirm') this.triggerEvent('confirm') } } })
wxml文件
<view class="mask" wx:if="{{status}}"> <view class="dialog"> <view class="dialog-header"> {{title}} </view> <view class="dialog-body"> <view wx:if="{{content}}" class='content'>{{content}}</view> <slot></slot> </view> <view class="dialog-footer"> <view class="dialog-btn" bindtap='handleCancel'>取消</view> <view class="dialog-btn" bindtap='handleConfirm'>确认</view> </view> </view> </view>
wxss文件
.mask{ position:fixed; top:0; left:0; right:0; bottom:0; background-color:rgb(0,0,0,0.3); display:flex; align-items: center; justify-content:center; } .dialog{ width:600rpx; height:auto; background:#fff; border-radius:30rpx; } .dialog-header{ padding:30rpx 0; text-align:center; font-size:36rpx; } .dialog-footer{ display:flex; } .dialog-btn{ flex:1; text-align:center; padding:40rpx 0; border-top:1rpx solid #eee; } .dialog-btn:first-child{ border-right:1rpx solid #eee; } .dialog-body{ padding:30rpx; } .content { text-indent: 72rpx; color:#333; } .dialog-body image{ width:100%; }
这样就可以实现一个简单的点击出现弹窗的效果。
加载全部内容