微信小程序自定义弹框效果

本文实例为大家分享了微信小程序自定义弹框效果的具体代码,供大家参考,具体内容如下

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)

相关推荐

  • 微信小程序开发之toast等弹框提示使用教程

    介绍 微信小程序中toast消息提示框只有两种显示的效果,就是成功和加载,使用wx.showToast(OBJECT) . 看下有关参数说明: 代码很简单: wx.showToast({ title: '成功', icon: 'succes', duration: 1000, mask:true }) mask属性好像并没有起作用.有一点值得注意的是提示的延迟时间是有限制的,最大10000毫秒. 还有一个函数是wx.hideToast() ,这个是隐藏toast,主要用于显示加载提示的时候用到,

  • 微信小程序 modal弹框组件详解

    微信小程序  modal: 这里对微信小程序中 modal组件进行详细解析,我想开发微信小程序的小伙伴可以用到,这里小编就记录下modal的知识要点. modal modal类似于javascript中的confirm弹框,默认情况下是一个带有确认取消的弹框,不过点击取消后弹框不会自动隐藏,需要通过触发事件调用函数来控制hidden属性. 官方文档 .wxml <modal hidden="{{hidden}}" title="这里是title" confir

  • 微信小程序之几种常见的弹框提示信息实现详解

    一.模态窗口 delete(){ wx.showModal({ title: '', content: '是否确认删除', success(res) { if (res.confirm) { console.log('用户点击确定') } else if (res.cancel) { console.log('用户点击取消') } } }) } 二.提示你想提示的信息 提示你想提示的信息 wx.showToast({ title: '成功', icon: 'success', duration:

  • 微信小程序 弹框和模态框实现代码

    微信小程序 弹框和模态框实现代码 实现效果图: 实现代码: <view class="wxapp-modal" style="{{modal_style}}"> <view class="content"> </view> <view class="mask" bindtap="closeModal"></view> </view> /

  • 微信小程序实现自定义动画弹框/提示框的方法实例

    目录 前言 css3 实现动画 小程序动画 API-实现动画 结语 相关文档 前言 在小程序中,用户与界面进行交互时,有一些用户反馈提示,例如:触发某个按钮,从底部弹出框,从顶部弹出等 如今,有一些现成的 UI 库,虽然已经实现了的,但若只是为了实现一个底部弹出框或者自定义提示框,不引用第三方 UI 库 怎么手动原生方式去实现呢,最主要的是怎么去实现动画 css3 实现动画 如下是wxml代码 <view> <view class="click-btn" catcht

  • 微信小程序开发实现首页弹框活动引导功能

    目录 1.需求 2.数据库设计 3.Java后台配置实现 4.微信小程序前端实现 总结 1.需求 后台可以配置活动时间,在活动期间,自动在小程序首页,以弹框形式显示活动图片.用户可以关闭活动图片的显示. 1.管理后台可以新增活动时间段,是否弹框显示,弹框图片和活动是否开启配置 2.进入小程序时,请求一下后台是否有弹框活动,如果有,就弹框显示活动图片 2.数据库设计 由于小程序弹框活动是系统配置中的一项,直接使用公共的系统配置来存储弹框活动配置. 公共系统配置表结构如下: CREATE TABLE

  • 微信小程序开发之实现自定义Toast弹框

    前言 之前有篇文章是写的Toast使用,但是有时候官方的样式并不能满足业务要求,怎么办呢,当然有解决办法了.有一个插件可以直接帮我们完成,WeToast. 先来看一下效果图: 怎么用呢,我们来看一下: WeTaost插件源码位于src目录下,包含3个文件. wetoast.js: 脚本代码 wetoast.wxml: 模板结构 wetoast.wxss: 样式 使用时只需要加入以上3个文件即可 第一步:在项目的app.js中引入wetoast.js,并注册到小程序上,小程序所有Page页面均可使

  • 微信小程序实现弹框效果

    本文实例为大家分享了微信小程序实现弹框效果的具体代码,供大家参考,具体内容如下 先上代码 wxml部分: <view class='top' bindtap='powerDrawer' data-statu="open" data-num='300'> <text>向上弹起</text> </view> <view class='top' bindtap='powerDrawer' data-statu="open&quo

  • 微信小程序自定义弹框效果

    本文实例为大家分享了微信小程序自定义弹框效果的具体代码,供大家参考,具体内容如下 wxml <!-- 取消订单按钮 --> <view class="cancelBtn" bindtap="cancelOrder" data-id="{{item.id}}" data-type="{{type}}">取消订单</view> <!-- 取消订单弹框 --> <view cla

  • 小程序自定义弹框效果

    本文实例为大家分享了小程序自定义弹框效果的具体代码,供大家参考,具体内容如下 wxml <!--button--> <view class="btn" bindtap="powerDrawer" data-statu="open">来点我呀</view> <!--mask--> <view class="drawer_screen" bindtap="powerD

  • 微信小程序自定义弹出模态框禁止底部滚动功能

    图示: wxml代码: <view class='fix_bottom'> <view>分享</view> <view>电话咨询</view> <view class='active' bindtap="showDialogBtn">立即报名</view> </view> <!--模态框--> <!-- 遮罩层 --> <view class="mod

  • 微信小程序自定义模态框

    本文实例为大家分享了微信小程序自定义模态框的具体代码,供大家参考,具体内容如下 效果展示 可在模态框中添加图片输入框 代码展示-wxml <button class="show-btn" bindtap="showDialogBtn">弹窗</button>     <view       class="modal-mask"       bindtap="hideModal"       cat

  • 微信小程序自定义单选框样式实现单选功能

    本文实例为大家分享了微信小程序自定义单选框样式实现单选功能的具体代码,供大家参考,具体内容如下 实现效果: 选择小车时,其他类型的车取消选中. 具体思路: 用数组存几种类型车的数据,给每条数据设置点击未选中的效果(checked 设为 false).点击某一种车时,获取其下标,将它的设置为选中(checked 设置 true). 代码如下: // index.js Page({   /**    * 页面的初始数据    */   data: {     list: [{         img

  • 小程序自定义弹框的方法

    本文实例为大家分享了小程序自定义弹框的具体代码,供大家参考,具体内容如下 1.页面简单布局 <button bindtap='ElasticFrameClick'>弹框</button> <view class="modal-mask" bindtap="hideModal" wx:if="{{showModal}}"></view> <view wx:if="{{showModal

  • 微信小程序自定义弹出层效果

    本文实例为大家分享了微信小程序实现弹出层效果的具体代码,供大家参考,具体内容如下 效果图 WXML <view class='popup' wx:if="{{popShow}}"> <view class='mask' catchtouchmove="preventTouchMove" catchtap='closePop'> </view> <!-- 弹出层 --> <view class='popup_mai

  • 微信小程序自定义导航栏效果

    本文实例为大家分享了微信小程序自定义导航栏的具体代码,供大家参考,具体内容如下 第一步 添加属性 “navigationStyle”: “custom” 全局: app.json中添加属性 “navigationStyle”: “custom” "window": {     "backgroundTextStyle": "light",     "navigationBarBackgroundColor": "#f

随机推荐