快捷導(dǎo)航

微信小程序自定義彈框效果

更新時(shí)間：2022年07月07日 13:36:33 作者：asteriaV

這篇文章主要為大家詳細(xì)介紹了微信小程序自定義彈框效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了微信小程序自定義彈框效果的具體代碼，供大家參考，具體內(nèi)容如下

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;
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: