本文实例为大家分享了微信小程序自定义弹框效果的具体代码,供大家参考,具体内容如下 wxml <!-- 取消订单按钮 --> <view class="cancelB
本文实例为大家分享了微信小程序自定义弹框效果的具体代码,供大家参考,具体内容如下
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>
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;
}
.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;
}
--结束END--
本文标题: 微信小程序自定义弹框效果
本文链接: https://www.lsjlt.com/news/153765.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0