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

1.目录结构

2.index.json

{"component": true}

3. index.wxml

<view wx:if='{{showModal}}'><view class='mask_layer' /><view class='modal_box'><view class="title">{{title}}</view><view class='content'><text class='modalMsg'>{{content}}</text><!-- <textarea class='input_show1' bindinput='changeCancelReason' auto-height value='{{modalMsg}}' bindfocus='bindfocus' bindblur='bindblur' placeholder='{{modalMsg_placeholder}}'></textarea> --></view><view class='btn1'><view bindtap='modal_click_Hidden' class='cancel'>{{cancelText}}</view><view bindtap='Sure' class='Sure'>{{sureText}}</view></view></view>
</view>

4.index.wxss

.mask_layer {width: 100%;height: 100%;position: fixed;z-index: 999;left:0;top:0;background: #000;opacity: 0.5;overflow: hidden;}.modal_box {width: 79%;overflow: hidden;position: fixed;top: 50%;left: 0;z-index: 1001;background: #fff;margin: -150px 12% 0 12%;border-radius: 28rpx;font-size: 32rpx;}.title {padding: 15px;text-align: center;font-weight: bold;}.content {overflow-y: scroll; /*超出父盒子高度可滚动*/color: #999;padding: 10rpx 20rpx;}.input_show1{margin: 0 auto;width: 80%;margin-left: 10%;font-size: 32rpx;text-align: center;}.btn1 {width: 100%;margin-top: 65rpx;display: flex;flex-direction: row;align-items: center;justify-content: space-between;box-sizing: border-box;background-color: white;border-top:1px solid #eee;font-weight: bolder;}.cancel {width: 100%;padding: 10px;text-align: center;color: black;}.Sure {width: 100%;padding: 10px;color: #ffd302;background-color: white;border-left: 1px solid #eee;text-align: center;}.modalMsg {text-align: center;/* margin-top: 45rpx; */display: block;}

5.index.js

Component({  options: {  multipleSlots: true // 在组件定义时的选项中启用多slot支持  },  /** * 组件的属性列表 */  properties: {  showModal: {type: Boolean,value: 'false'},     title: {type: String,value: '提示'}, content:{type: String,value: '内容'},  cancelText: {type: String,value: '取消'},     sureText: {type: String,value: '确定'},},  /** * 组件的初始数据 */  data: {  },  /** * 组件的方法列表 */  methods: {  modal_click_Hidden: function () {this.setData({showModal: false,})},// 确定Sure: function () {this.triggerEvent('handleSureBtn')}, }  })

6.需要引用组件的页面

json页面

"usingComponents": {"myModal":"/components/modal/index"},

wxml页面

<myModal showModal="{{showModal}}"content="{{modalContent}}" cancelText="{{modalCancelText}}" sureText="{{modalSureText}}" bindhandleSureBtn="handleSureBtn"bindhandleCancelBtn="handleCancelBtn"></myModal>

微信小程序自定义modal模态框相关推荐

微信小程序自定义授权弹框
微信小程序自定义授权弹框最近微信获取用户信息的接口有调整,就是这货:wx.getUserInfo(OBJECT),文档描述如下: 此接口有调整,使用该接口将不再出现授权弹窗,请使用 <butt ...
微信小程序自定义modal弹窗组件
微信小程序开发中官方自带的wx.showModal,这个弹窗 API有时候并不能满足我们的弹窗效果,所以往往需要自定义modal组件.下面我们进行一个自定义modal弹窗组件的开发,并进行组件的引用, ...
微信小程序自定义picker弹框组件
要有遥不可及的梦想,也要有脚踏实地的本事.----------- Grapefruit.Banuit Gang(香柚帮) 柚子写项目遇到了一个问题,就是微信小程序官方文档上面的弹框组件picker,它 ...
微信小程序——自定义下拉框
微信小程序本身并没有自带的下拉框组件,我们可以通过view标签自定义一个下拉框.(仅供参考) 目录文件目录实现效果实现逻辑设置数据设置默认选项实现弹出下拉框提供选项值设置所选值源码 ...
微信小程序自定义弹出框组件，模拟wx.showModal
微信小程序开发交流qq群 173683895 效果图: 代码 wxml <view wx:if='{{showModal}}'><view class='mask_layer' ...
微信小程序自定义复选框
微信官方给的复选框太丑,想要样式多样需要我们自己定义先来张效果图 wxml循环生成选框,从js里取数据,根据checked的值,改变标签的样式类 <view class="two { ...
微信小程序自定义弹出框
网上搜了一下感觉都没有好用的自定义弹框就自己手写了一个,方便以后CV 弹框可以点击按钮关闭,也可以点击空白关闭代码很简单 wxml <view bindtap="submit&quo ...
微信小程序简易实现模态框弹出框方法代码
方法如下介绍 wxml代码 Javacript代码 wxss样式介绍可以将showModal和hideModal内的方法交换从而改变弹出框方向,但要注意showModalStatus在两个函数内 ...
微信小程序自定义模态框，官方版本与自定义可扩展版本
微信小程序自定义模态框,官方版本与自定义可扩展版本提示:文章最后有源码,可自取文章主要通过模仿官方的模态框进行自定义模态框的设计,我将会先讲述原理,然后给出源码,最后指出一些需要注意的地方提示: ...
html自定义js程序,JS中微信小程序自定义底部弹出框
实现微信小程序底部弹出框效果,代码分为html,css和js两部分,具体代码详情大家参考下本文. html CSS .commodity_screen { width: 100%; height: 1 ...

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

微信小程序自定义modal模态框相关推荐

最新文章

热门文章