資訊專欄INFORMATION COLUMN
本篇文章主要為大家介紹關(guān)于微信小程序自定義彈框展示的具體代碼，現(xiàn)在我們一起看下：
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="請(qǐng)輸入其他原因"></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)容已講述完畢，歡迎大家關(guān)注更多精彩內(nèi)容。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/128402.html
摘要：于是我自己寫一個(gè)我的頁面專用的彈框，具體效果如下圖以下是代碼貼圖最外層的樣式主要是寫后面的遮罩層，就是具體的彈框區(qū)域彈框的顯示隱藏用控制然后就可以在彈框中寫自己想要展示的效果啦忽略部分未調(diào)整樣式 微信小程序提供的彈框模版就3種：1、消息提示框showImg(https://segmentfault.com/img/bVbokVL?w=1074&h=554);對(duì)應(yīng)的效果是這樣的 show...
摘要：于是我自己寫一個(gè)我的頁面專用的彈框，具體效果如下圖以下是代碼貼圖最外層的樣式主要是寫后面的遮罩層，就是具體的彈框區(qū)域彈框的顯示隱藏用控制然后就可以在彈框中寫自己想要展示的效果啦忽略部分未調(diào)整樣式 微信小程序提供的彈框模版就3種：1、消息提示框showImg(https://segmentfault.com/img/bVbokVL?w=1074&h=554);對(duì)應(yīng)的效果是這樣的 show...
摘要：優(yōu)雅解決微信小程序授權(quán)登錄需要觸發(fā)聊一聊最近的一個(gè)項(xiàng)目，這個(gè)項(xiàng)目是一個(gè)收書售書的小程序，有商城專欄信息發(fā)布論壇等功能。微信不會(huì)把的有效期告知開發(fā)者。 優(yōu)雅解決微信小程序授權(quán)登錄需要button觸發(fā) 聊一聊最近的一個(gè)項(xiàng)目，這個(gè)項(xiàng)目是一個(gè)收書、售書的小程序，有商城、專欄、信息發(fā)布論壇等功能。雖然不是面向所有用戶，但要求無論用戶是否授權(quán)都皆可使用，但同時(shí)也要求部分功能對(duì)不授權(quán)的用戶限制開放。...
本篇文章就是為大家分享在微信小程序?qū)崿F(xiàn)簡單彈框的具體代碼，現(xiàn)在我們看下： 1、頁面結(jié)構(gòu) <!--遮罩層--> <view> <viewclass="mask"bindtap="close"wx:if="{{showModal}}"></view> <viewcla...
閱讀 506·2023-03-27 18:33
閱讀 709·2023-03-26 17:27
閱讀 607·2023-03-26 17:14
閱讀 578·2023-03-17 21:13
閱讀 503·2023-03-17 08:28
閱讀 1755·2023-02-27 22:32
閱讀 1262·2023-02-27 22:27
閱讀 2067·2023-01-20 08:28
