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


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 相关文章推荐
一些常用的JavaScript函数(json)附详细说明
May 25 Javascript
js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)
Dec 27 Javascript
JavaScript定时器详解及实例
Aug 01 Javascript
为JS扩展Array.prototype.indexOf引发的问题及解决办法
Jan 21 Javascript
javascript日期处理函数,性能优化批处理
Sep 06 Javascript
js与jquery分别实现tab标签页功能的方法
Nov 18 Javascript
Angular.Js的自动化测试详解
Dec 09 Javascript
jquery插件锦集【推荐】
Dec 16 Javascript
vue-cli开发时,关于ajax跨域的解决方法(推荐)
Feb 03 Javascript
使用vue中的混入mixin优化表单验证插件问题
Jul 02 Javascript
解决vue.js提交数组时出现数组下标的问题
Nov 05 Javascript
JavaScript实现简单计算器
Mar 19 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
fleaphp crud操作之findByField函数的使用方法
2011/04/23 PHP
php设计模式 FlyWeight (享元模式)
2011/06/26 PHP
PHP获取文件夹内文件数的方法
2015/03/12 PHP
php实现阿拉伯数字和罗马数字相互转换的方法
2015/04/17 PHP
详解YII关联查询
2016/01/10 PHP
Zend Framework实现多文件上传功能实例
2016/03/21 PHP
由JavaScript中call()方法引发的对面向对象继承机制call的思考
2011/09/12 Javascript
javascript 获取图片尺寸及放大图片
2013/09/04 Javascript
调用jQuery滑出效果时闪烁的解决方法
2014/03/27 Javascript
基于JavaScript实现动态创建表格和增加表格行数
2015/12/20 Javascript
简单实现js间歇或无缝滚动效果
2016/06/29 Javascript
JavaScript仿微博发布信息案例
2016/11/16 Javascript
js仿拉勾网首页穿墙广告效果
2017/03/08 Javascript
webpack4的迁移的使用方法
2018/05/25 Javascript
React styled-components设置组件属性的方法
2018/08/07 Javascript
微信上传视频文件提示(推荐)
2018/11/22 Javascript
详解Vue-cli3.X使用px2rem遇到的问题
2019/08/09 Javascript
layui 实现自动选择radio单选框(checked)的方法
2019/09/03 Javascript
mpvue实现微信小程序快递单号查询代码
2020/04/03 Javascript
Antd下拉选择,自动匹配功能的实现
2020/10/24 Javascript
Python入门篇之函数
2014/10/20 Python
Python编程判断一个正整数是否为素数的方法
2017/04/14 Python
python利用urllib和urllib2访问http的GET/POST详解
2017/09/27 Python
PyQt5利用QPainter绘制各种图形的实例
2017/10/19 Python
python3发送邮件需要经过代理服务器的示例代码
2019/07/25 Python
Python 实现Serial 与STM32J进行串口通讯
2019/12/18 Python
python中对二维列表中一维列表的调用方法
2020/06/07 Python
使用HTML5原生对话框元素并轻松创建模态框组件
2019/03/06 HTML / CSS
澳大利亚领先的优质葡萄酒拍卖会:Langton’s Fine Wines
2019/03/24 全球购物
Python文件操作的面试题
2013/06/22 面试题
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢?
2016/08/18 面试题
大学生求职信范文应怎么写
2014/01/01 职场文书
教师师德演讲稿
2014/05/06 职场文书
大学生心理健康活动总结
2015/05/08 职场文书
文艺演出主持词
2015/07/01 职场文书
Python中使用Lambda函数的5种用法
2021/04/01 Python