微信小程序自定义弹窗

系统自带的弹窗往往不能够满足我们的需求，那我们就只能自定义一个。

1、触发条件

一个弹窗的出现必然有一个触发条件，比如说一个按钮，我们点击它弹窗就会出现，要是不点它弹窗就不会出现

那么我们的思路就有了，可以使用wx:if

设置一个按钮

//wxml
<button bindtap="click">点我一下</button>
//设置一个点击事件

//jsdata: {show:false},click:function(){this.setData({show:!this.data.show})}

2、弹窗样式

有了触发条件我们就可以写弹窗了，其实一个弹窗就是一个视图容器，下面代码用的就是视图容器view来演示

//灰色遮罩，防止误触，可加可不加
<view class="mask" wx:if="{{show}}"></view>
//自定义的弹窗
<view class="windows"  wx:if="{{show}}">
</view>

//wxss  设置z-index是为了让遮罩挡住页面其他内容的同时不会挡住我们操纵弹窗
.mask{width: 100%;height: 100%;background-color: rgba(56, 55, 55, 0.651);position: absolute;top: 0;left: 0;z-index: 900;
}
.windows{width: 200px;height: 200px;background-color: rgb(82, 215, 255);position: absolute;left: 75px;top: 100px;z-index: 999;
}

3、关闭弹窗

既然我们通过按钮让一个弹窗得以出现，那么我们也该有一个东西让弹窗关闭，一下代码用button演示

//wxml
//在原来的弹窗内加一个button组件
<view class="windows"  wx:if="{{show}}"><button class="button" bindtap="click">关闭弹窗</button>
</view>//wxss
.button{margin-top: 100px;
}

自定义一个简单的弹窗就好啦

听说点赞、评论、收藏的小伙伴都拿到了大公司的offer了呢

微信小程序自定义弹窗相关推荐

html如何写微信弹窗,微信小程序自定义弹窗实现过程(附代码)_而已_前端开发者...
这篇文章主要介绍了微信小程序自定义弹窗实现过程(附代码),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下小程序官网里弹出框一般都是类似下面形式: ...
微信小程序点击按钮弹出弹窗_微信小程序自定义弹窗(可通用)
本文为自定义弹窗,该内容可满足如下需求: 自定义各种布局弹窗. 点击弹窗布局外消失弹窗弹出弹窗时背景阴影半透明各方向弹出效果(本文为自下而上弹出). (后续可能会补充新需求,或可以留言讨论你的需求 ...
微信小程序自定义弹窗组件
看微信小程序的文档觉得说的不是很清楚.于是,找到这篇文章,觉得挺好看.大家可以看看: https://www.cnblogs.com/demod... 补充: 还需要在popup.json文件添加一句 ...
微信小程序自定义弹窗组件 action-sheet
最近公司在开发短剧小程序,短剧的剧集展示交互需要用到组件 action-sheet,小程序自带的有这个组件,但是这个组件支持的功能比较单一,相当于是一个选择表一样,不能自定义很多内容,只能自定义一个组 ...
微信小程序自定义弹窗实例
自定义模态对话框实例由于官方API提供的显示模态弹窗,只能简单地显示文字内容,不能对对话框内容进行自定义,欠缺灵活性,所以自己从模态弹窗的原理角度来实现了自定义的模态对话框. wx.showModa ...
微信小程序—自定义（城市选择）弹窗组件，将弹窗组件的值传给调用页面并显示（图文）
微信小程序-自定义(城市选择)弹窗组件,并传值 1.新建component文件夹用来存放自定义组件,并在其文件夹内新建cityModal Component,注意不是新建Page 新建完成之后出现四个 ...
微信小程序自定义授权弹框
微信小程序自定义授权弹框最近微信获取用户信息的接口有调整,就是这货:wx.getUserInfo(OBJECT),文档描述如下: 此接口有调整,使用该接口将不再出现授权弹窗,请使用 <butt ...
微信小程序自定义类似微信联系人组件
微信小程序自定义联系人弹窗在小程序项目中需要有一个选择人员项,想着看着好看一些,所以做成类似微信联系人的界面,由于本人是后端人员,效果不是特别好看,ui使用的是weui 效果图如下: 使用的是小程序 ...
微信小程序自定义文本输入框-升级版
之前也有写过微信小程序自定义输入框的实现方法,请看文章;https://blog.csdn.net/chengdong1314/article/details/123577082 这里之所以再次写这篇 ...
微信小程序自定义组件方案
前言:小程序已于11月初开放了小程序组件功能,但事件方面还不是很完善,有的组件暂时可能还是要用其他方式来实现,这里简单记录下开发小程序自定义组件的要点. 在小程序官方开发组件开发功能之前,自定义组件的 ...

微信小程序自定义弹窗

微信小程序自定义弹窗相关推荐

最新文章

热门文章