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


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弹出填写提示效果代码
Apr 16 Javascript
JQuery动画和停止动画实例代码
Mar 01 Javascript
jquery 滚动条事件简单实例
Jul 12 Javascript
JavaScript使用push方法添加一个元素到数组末尾用法实例
Apr 06 Javascript
javascript中eval函数用法分析
Apr 25 Javascript
10个JavaScript中易犯小错误
Feb 14 Javascript
微信小程序 登陆流程详细介绍
Jan 17 Javascript
js浏览器滚动条卷去的高度scrolltop(实例讲解)
Jul 07 Javascript
vue学习笔记之slot插槽用法实例分析
Feb 29 Javascript
JS一次前端面试经历记录
Mar 19 Javascript
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
Mar 20 jQuery
JavaScript canvas实现雨滴特效
Jan 10 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 UTF8编码内的繁简转换类
2009/07/20 PHP
PHP生成sitemap.xml地图函数
2013/11/13 PHP
2014年10个最佳的PHP图像操作库
2014/07/14 PHP
举例讲解PHP面对对象编程的多态
2015/08/12 PHP
PHP实现的超长文本分页显示功能示例
2018/06/04 PHP
PHP设计模式之建造者模式(Builder)原理与用法案例详解
2019/12/12 PHP
Javascript 鼠标移动上去小三角形滑块缓慢跟随效果
2013/04/26 Javascript
js获得当前时区夏令时发生和终止的时间代码
2014/02/23 Javascript
5款JavaScript代码压缩工具推荐
2014/07/07 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(基于jquery)
2015/11/18 Javascript
jQuery进行组件开发完整实例
2015/12/15 Javascript
AngularJs动态加载模块和依赖注入详解
2016/01/11 Javascript
jquery zTree异步加载、模糊搜索简单实例分享
2016/03/24 Javascript
表单中单选框添加选项和移除选项
2016/07/04 Javascript
DOM操作原生js 的bug,使用jQuery 可以消除的解决方法
2016/09/04 Javascript
js实现图片360度旋转
2017/01/22 Javascript
利用angularjs1.4制作的简易滑动门效果
2017/02/28 Javascript
ES6学习笔记之map、set与数组、对象的对比
2018/03/01 Javascript
详解vue中localStorage的使用方法
2018/11/22 Javascript
解决layer弹出层中表单不起作用的问题
2019/09/09 Javascript
vue 动态生成拓扑图的示例
2021/01/03 Vue.js
详解vite2.0配置学习(typescript版本)
2021/02/25 Javascript
[01:25:09]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第二场
2014/05/24 DOTA
python实现rsa加密实例详解
2017/07/19 Python
总结Python图形用户界面和游戏开发知识点
2019/05/22 Python
对Python中TKinter模块中的Label组件实例详解
2019/06/14 Python
python自定义时钟类、定时任务类
2021/02/22 Python
处理HTML5新标签的浏览器兼容版问题
2017/03/13 HTML / CSS
HTML利用九宫格原理进行网页布局
2020/03/13 HTML / CSS
编程实现当输入某产品代码则打印出该产品记录的功能
2014/05/03 面试题
给同学的道歉信
2014/01/16 职场文书
2014年学校国庆主题活动方案
2014/09/16 职场文书
监察局领导班子四风问题整改措施思想汇报
2014/10/05 职场文书
名人传读书笔记
2015/06/26 职场文书
Python面向对象之内置函数相关知识总结
2021/06/24 Python
Python字符串格式化方式
2022/04/07 Python