微信小程序自定义弹框效果
本文实例为大家分享了微信小程序自定义弹框效果的具体代码,供大家参考,具体内容如下
wxml
<!-- 取消订单按钮 --> <view class="cancelBtn" bindtap="cancelOrder" data-id="{{item.id}}" data-type="{{type}}">取消订单</view> <!-- 取消订单弹框 --> <view class="modalDlg-mask" wx:if="{{showModal}}"></view> <view class="modalDlg" wx:if="{{showModal}}"> <view class="page-body"> <form bindsubmit="submit"> <view class="modalDlg-title"> <text>取消订单原因</text> </view> <view class="modalDlg-content"> <view class="modalDlg-content-item"> <radio-group bindchange="radioChange"> <label class="weui-cell weui-check__label" wx:for="{{items}}" wx:key="index"> <view class="weui-cell__hd"> <radio value="{{item.value}}" color="#ff5155" /> </view> <view wx:if="{{item.value!=='3'}}" class="weui-cell__bd">{{item.name}}</view> <text wx:if="{{item.value==='3'}}" style="width:150rpx;">{{item.name}}</text> <textarea wx:if="{{item.value==='3'}}" bindinput="bindTextArea" auto-height="true" placeholder="请输入其他原因"></textarea> </label> </radio-group> </view> </view> <view class="modalDlg-footer"> <view bindtap="closeModal" class="modalDlg-btn closeBtn">取消</view> <view bindtap="confirmModal" form-type="submit" class="modalDlg-btn confirmBtn">确定</view> </view> </form> </view> </view>
js
data:{ showModal: false, //取消订单弹框 } , //取消订单弹框 cancelOrder() { this.setData({ showModal: true }) }, //取消订单弹框-确定 confirmModal() { this.setData({ showModal: false }); }, //取消订单弹框-取消 closeModal() { this.setData({ showModal: false }) },
wxss
/* 取消订单弹框 */ .page-body { width: 100%; } /* 遮罩层 */ .modalDlg-mask { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: #000; z-index: 9000; opacity: 0.5; } /* 弹出层 */ .modalDlg { width: 70%; position: fixed; top: 25%; left: 0; right: 0; z-index: 9999; margin: 0 auto; background-color: #fff; border-radius: 5px; display: flex; flex-direction: column; align-items: center; } .modalDlg-title{ width: 100%; display: flex; align-items: center; justify-content: center; padding: 20rpx 0rpx; } .modalDlg-content { width: 100%; display: flex; flex-direction: column; justify-content: center; padding: 10rpx 0; } .modalDlg-content .modalDlg-content-item{ display: flex; align-items: center; justify-content: space-between; } .modalDlg-content .modalDlg-content-item radio-group{ width: 100%; color: #666; } .modalDlg-content .modalDlg-content-item .weui-check__label{ display: flex; align-items: center; } .modalDlg-content .modalDlg-content-item .weui-cell__bd{ line-height: 48rpx; } .modalDlg-content .modalDlg-content-item .weui-cell{ padding: 20rpx; display: flex; flex-direction: row; } .modalDlg-footer { width: 100%; height: 100rpx; border-top: 1rpx solid #ededed; display: flex; align-items: center; flex-wrap: nowrap; justify-content: space-between; } /* 弹出层里面的文字 */ .modalDlg .modalDlg-content text { text-align: justify; font-size: 28rpx; color: #666; /* margin-left: 10px; */ } /* 弹出层里面的按钮 */ .modalDlg-btn { width: 80px; height: 70rpx; line-height: 70rpx; text-align: center; font-size: 28rpx; border-radius: 40rpx; margin: 0 auto; } .modalDlg .modalDlg-footer .closeBtn { background: #fff; color: #fc4141; border: 1rpx solid #fc4141; } .modalDlg .modalDlg-footer .confirmBtn { background: #fc4141; color: #fff; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
赞 (0)