微客导航 » 文章资讯 » 微信小程序自定义弹窗实现过程(附代码)

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

2023-08-04 23:14:05 211

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

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

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

代码如下：

index.wxml文件



点击出现弹窗



自定义内容。。。

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
//获取应用实例
constapp=getApp()

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

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

https://github.com/bbSpider/miniprogram

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

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

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

热门推荐

随机推荐

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