微信小程序自定义弹框展示

3403771864 发布于2022-12-06 22:13 / 305人阅读

　　本篇文章主要为大家介绍关于微信小程序自定义弹框展示的具体代码，现在我们一起看下：

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

　　内容已讲述完毕，欢迎大家关注更多精彩内容。

idc机房托管专线服务自定义弹框自定义弹框js插件微信小程序微信小程序支付

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/128402.html

在微信小程序中创建属于自己的个性弹框

摘要：于是我自己写一个我的页面专用的弹框，具体效果如下图以下是代码贴图最外层的样式主要是写后面的遮罩层，就是具体的弹框区域弹框的显示隐藏用控制然后就可以在弹框中写自己想要展示的效果啦忽略部分未调整样式微信小程序提供的弹框模版就3种：1、消息提示框showImg(https://segmentfault.com/img/bVbokVL?w=1074&h=554);对应的效果是这样的 show...

luck 2019-08-30 15:55 评论0 收藏0
在微信小程序中创建属于自己的个性弹框

摘要：于是我自己写一个我的页面专用的弹框，具体效果如下图以下是代码贴图最外层的样式主要是写后面的遮罩层，就是具体的弹框区域弹框的显示隐藏用控制然后就可以在弹框中写自己想要展示的效果啦忽略部分未调整样式微信小程序提供的弹框模版就3种：1、消息提示框showImg(https://segmentfault.com/img/bVbokVL?w=1074&h=554);对应的效果是这样的 show...

yy13818512006 2019-08-23 15:12 评论0 收藏0
在微信小程序中创建属于自己的个性弹框

摘要：于是我自己写一个我的页面专用的弹框，具体效果如下图以下是代码贴图最外层的样式主要是写后面的遮罩层，就是具体的弹框区域弹框的显示隐藏用控制然后就可以在弹框中写自己想要展示的效果啦忽略部分未调整样式微信小程序提供的弹框模版就3种：1、消息提示框showImg(https://segmentfault.com/img/bVbokVL?w=1074&h=554);对应的效果是这样的 show...

EastWoodYang 2019-08-05 18:09 评论0 收藏0
优雅解决微信小程序授权登录需要button触发

摘要：优雅解决微信小程序授权登录需要触发聊一聊最近的一个项目，这个项目是一个收书售书的小程序，有商城专栏信息发布论坛等功能。微信不会把的有效期告知开发者。优雅解决微信小程序授权登录需要button触发聊一聊最近的一个项目，这个项目是一个收书、售书的小程序，有商城、专栏、信息发布论坛等功能。虽然不是面向所有用户，但要求无论用户是否授权都皆可使用，但同时也要求部分功能对不授权的用户限制开放。...

plus2047 2019-08-23 15:40 评论0 收藏0
微信小程序实现简单弹框具体代码

　　本篇文章就是为大家分享在微信小程序实现简单弹框的具体代码，现在我们看下： 1、页面结构　　 　　<view> 　　<viewclass="mask"bindtap="close"wx:if="{{showModal}}"></view> 　　<viewcla...

3403771864 2022-12-16 17:30 评论0 收藏0