快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线:028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

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

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

成都创新互联坚持“要么做到,要么别承诺”的工作理念,服务领域包括:网站建设、网站设计、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的山丹网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!

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

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

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

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

代码如下:

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

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

完整代码已放在github上,链接如下:

https://github.com/bbSpider/miniprogram

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。


网站栏目:微信小程序自定义弹窗实现过程(附代码)
链接URL:http://6mz.cn/article/jpdhji.html

其他资讯