微信小程序自定义弹窗实现过程(附代码)

更新时间：2019年12月05日 14:23:22 作者：故事外的人呀

这篇文章主要介绍了微信小程序自定义弹窗实现过程(附代码),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

小程序官网里弹出框一般都是类似下面形式：

而有时候我们需要更丰富的弹窗时，就可用自定义弹窗的样式：
举个例子，像下面图的样式，点击后会弹出不一样的窗口：

代码如下：

index.wxml 文件

<!--index.wxml-->
<view class="click" bindtap="click">
 <text>点击出现弹窗</text>
</view>
<!-- 弹窗 -->
<view class="window" wx:if="{{tab==1}}">
 自定义内容。。。
</view>

index.wxss 文件

/**index.wxss**/
.click{
 width: 500rpx;
 height: 70rpx;
 font-size: 20px;
}
.window{
 position: fixed;
 height: 400rpx;
 width: 400rpx;
 transform: translate( 50%, 50%);/*距x,y轴*/
 background: salmon;
}

index.js 文件

//index.js
//获取应用实例
const app = getApp()

Page({
 data: {
  tab: 0
 },
 //点击出现弹窗
 click: function() {
  let that = this;
  that.setData({
   tab: 1
  });
 }
})

完整代码已放在github上，链接如下：

https://github.com/bbSpider/miniprogram

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

JS集合set类的实现与使用方法示例
这篇文章主要介绍了JS集合set类的实现与使用方法,结合具体实例形式分析了javascript集合的创建、元素添加、删除以及并集、交集、补集等运算相关操作技巧,需要的朋友可以参考下
2019-02-02
javascript 装载iframe子页面，自适应高度
2009-03-03
fiv.js实现flv文件blob流实时播放的项目实践
本文主要介绍了fiv.js实现flv文件blob流实时播放的项目实践，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-04-04
uniapp获取页面高度与元素高度简单示例
在实际开发中我们会遇到不确定高度的情况,那么在uniapp中我们如何获取区域的高度呐?这篇文章主要给大家介绍了关于uniapp获取页面高度与元素高度的相关资料,需要的朋友可以参考下
2023-09-09
stackoverflow常用工具库总结
这篇文章主要为大家介绍了stackoverflow常用工具库总结，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-03-03
javascript parseInt与Number函数的区别
在js中，如果你使用parseInt("08"),一般都会认为会返回8，然而实际上返回了0.但是用Number("08")返回的才是8.
2010-01-01
微信小程序实现多列选择器
这篇文章主要为大家详细介绍了微信小程序实现多列选择器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07
freemarker判断对象是否为空的方法
FreeMarker是一个用Java语言编写的模板引擎，它基于模板来生成文本输出，用FreeMarker判断对象是否为空的方法大家知道吗，这篇文章就针对这个知道点做介绍，需要的朋友可以参考下
2015-08-08
使用webpack将ES6转化ES5的实现方法
这篇文章主要介绍了使用webpack将ES6转化ES5的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-10-10
BOM系列第一篇之定时器setTimeout和setInterval
这篇文章主要介绍了BOM系列第一篇之定时器setTimeout和setInterval 的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2016-08-08