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


Posted in Javascript onDecember 05, 2019

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

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

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

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

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

代码如下:

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 相关文章推荐
js判断浏览器的比较全的代码
Feb 13 Javascript
精解window.setTimeout()&amp;window.setInterval()使用方式与参数传递问题!
Nov 23 Javascript
JavaScript 异步调用框架 (Part 6 - 实例 &amp; 模式)
Aug 04 Javascript
屏蔽Flash右键信息的js代码
Jan 17 Javascript
js Form.elements[i]的使用实例
Nov 13 Javascript
利用div+jquery自定义滚动条样式的2种方法
Jul 18 Javascript
纯js实现瀑布流布局及ajax动态新增数据
Apr 07 Javascript
jQuery插件WebUploader实现文件上传
Nov 07 Javascript
bootstrap table操作技巧分享
Feb 15 Javascript
AngularJS 控制器 controller的详解
Oct 17 Javascript
AjaxUpLoad.js实现文件上传
Mar 05 Javascript
vuex + keep-alive实现tab标签页面缓存功能
Oct 17 Javascript
Nuxt v-bind绑定img src不显示的解决
Dec 05 #Javascript
微信小程序swiper左右扩展各显示一半代码实例
Dec 05 #Javascript
微信小程序顶部导航栏可滑动并选中放大
Dec 05 #Javascript
微信小程序实现点击按钮后修改颜色
Dec 05 #Javascript
React 父子组件通信的实现方法
Dec 05 #Javascript
Javascript中的this,bind和that使用实例
Dec 05 #Javascript
原生JS与CSS实现软件卸载对话框功能
Dec 05 #Javascript
You might like
php实现的错误处理封装类实例
2017/06/20 PHP
PHP实现的mysql主从数据库状态检测功能示例
2017/07/20 PHP
网页javascript精华代码集
2007/01/24 Javascript
js setattribute批量设置css样式
2009/11/26 Javascript
基于jquery的回到页面顶部按钮
2011/06/27 Javascript
JS中eval函数的使用示例
2013/07/21 Javascript
jQuery validate+artdialog+jquery form实现弹出表单思路详解
2016/04/18 Javascript
JavaScript继承学习笔记【新手必看】
2016/05/10 Javascript
Bootstrap 最常用的JS插件系列总结(图片轮播、标签切换等)
2016/07/14 Javascript
web 屏蔽BackSpace键实例代码
2016/12/24 Javascript
详解Angular的内置过滤器和自定义过滤器【推荐】
2016/12/26 Javascript
jQuery+Ajax实现用户名重名实时检测
2017/06/01 jQuery
React如何利用相对于根目录进行引用组件详解
2017/10/09 Javascript
jQuery封装animate.css的实例
2018/01/04 jQuery
JavaScript 五大常见函数
2018/03/23 Javascript
vue-cli3 从搭建到优化的详细步骤
2019/01/20 Javascript
微信小程序导航栏跟随滑动效果的实现代码
2019/05/14 Javascript
浅谈Vue为什么不能检测数组变动
2019/10/14 Javascript
[43:26]完美世界DOTA2联赛PWL S2 Forest vs Rebirth 第二场 11.20
2020/11/23 DOTA
python映射列表实例分析
2015/01/26 Python
Python探索之静态方法和类方法的区别详解
2017/10/27 Python
浅谈python中的占位符
2017/11/09 Python
python SVD压缩图像的实现代码
2019/11/05 Python
浅谈Django2.0 加xadmin踩的坑
2019/11/15 Python
pytorch实现focal loss的两种方式小结
2020/01/02 Python
HTML5地理定位_动力节点Java学院整理
2017/07/12 HTML / CSS
学校介绍信范文
2014/01/14 职场文书
电脑专业个人求职信范文
2014/02/04 职场文书
校长竞聘演讲稿
2014/05/16 职场文书
班级团队活动方案
2014/08/14 职场文书
离婚协议书怎样才有法律效力
2014/10/10 职场文书
和谐家庭事迹材料
2014/12/20 职场文书
清明节主题班会
2015/08/14 职场文书
创业计划书之水果店
2019/07/18 职场文书
Python 实现绘制子图及子图刻度的变换等问题
2021/05/31 Python
Redis集群的关闭与重启操作
2021/07/07 Redis