微信小程序 自定义弹窗实现过程(附代码)
更新时间：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
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
javascript中关于&& 和 || 表达式的小技巧分享
我将会介绍和解析12个简单但是强大的JavaScript技巧. 这些技巧所有的JavaScript程序员都可以马上使用, 你不需要成为JavaScript高手才能理解这些.下面我们开始本系列的第一篇文章，介绍下强大的&& 和 || 表达式2015-04-04
这篇文章介绍了js操作checkbox遇到的问题解决，有需要的朋友可以参考一下2013-06-06
这篇文章主要介绍了纯JS前端实现分页代码的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-06-06
这篇文章主要介绍了JavaScript 异步时序问题,帮助大家更好的理解和学习JavaScript，感兴趣的朋友可以了解下2020-11-11
js中setTimeout()与clearTimeout()用法实例浅析
这篇文章主要介绍了js中setTimeout()与clearTimeout()用法,以实例形式分析了setTimeout()与clearTimeout()的功能与使用技巧,需要的朋友可以参考下2015-05-05
window.opener，是通过window.open打开子窗体的父窗体的引用，下面为大家详细介绍下其具体的使用方法，感兴趣的朋友可以参考下2013-08-08
这篇文章主要介绍了js实现滑动触屏事件监听的方法,适用于手机端触屏滑动事件的监听技巧,非常具有实用价值,需要的朋友可以参考下2015-05-05
这篇文章主要介绍了JavaScript实现表格点击排序的方法,可实现点击顶部数据项标题实现对应数据列的排序效果,涉及javascript鼠标事件及数据排序的技巧,需要的朋友可以参考下2015-05-05
这篇文章主要给大家分享了24个实用JavaScript 的开发技巧，文章围绕JavaScript 的开发技巧讲解展开全文，具有一定的参考价值,需要的朋友可以参考一下，希望对你有所帮助2021-12-12
这篇文章主要介绍了JS中数组与对象的遍历方法,结合实例形式总结分析了JavaScript针对数组与对象遍历操作相关函数与使用技巧,需要的朋友可以参考下2018-08-08
最新评论