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


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 给汉字排序实例代码
Jun 28 Javascript
JavaScript 字符编码规则
May 04 Javascript
css结合js制作下拉菜单示例代码
Feb 27 Javascript
JavaScript支持的最大递归调用次数分析
Jun 24 Javascript
JavaScript测试工具之Karma-Jasmine的安装和使用详解
Dec 03 Javascript
第二章之Bootstrap 页面排版样式
Apr 25 Javascript
JavaScript实现输入框与清空按钮联动效果
Sep 09 Javascript
Vue之Watcher源码解析(1)
Jul 19 Javascript
基于Vue自定义指令实现按钮级权限控制思路详解
May 23 Javascript
webpack4 SCSS提取和懒加载的示例
Sep 03 Javascript
分享5个好用的javascript文件上传插件
Sep 16 Javascript
vue-router实现编程式导航的代码实例
Jan 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
PHP中常用数组处理方法实例分析
2008/08/30 PHP
php5.3中连接sqlserver2000的两种方法(com与ODBC)
2012/12/29 PHP
修改apache配置文件去除thinkphp url中的index.php
2014/01/17 PHP
PHP的MVC模式实现原理分析(一相简单的MVC框架范例)
2014/04/29 PHP
php自定义函数转换html标签示例
2016/09/29 PHP
PHP实现的折半查询算法示例
2017/10/09 PHP
Laravel5.4框架使用socialite实现github登录的方法
2019/03/20 PHP
php设计模式之观察者模式实例详解【星际争霸游戏案例】
2020/03/30 PHP
jquery在IE、FF浏览器的差别详细探讨
2013/04/28 Javascript
分享Javascript中最常用的55个经典小技巧
2013/11/29 Javascript
js中小数转换整数的方法
2014/01/26 Javascript
详解js中构造流程图的核心技术JsPlumb(2)
2015/12/08 Javascript
详谈Angular路由与Nodejs路由的区别
2017/03/05 NodeJs
ES6深入理解之“let”能替代”var“吗?
2017/06/28 Javascript
最实用的JS数组函数整理
2017/12/05 Javascript
jQuery NProgress.js加载进度插件的简单使用方法
2018/01/31 jQuery
vue better scroll 无法滚动的解决方法
2018/06/07 Javascript
MVVM 双向绑定的实现代码
2018/06/21 Javascript
JS实现返回上一页并刷新页面的方法分析
2019/07/16 Javascript
jquery实现简单自动轮播图效果
2020/07/29 jQuery
react实现复选框全选和反选组件效果
2020/08/25 Javascript
Python编程实现输入某年某月某日计算出这一天是该年第几天的方法
2017/04/18 Python
对python requests的content和text方法的区别详解
2018/10/11 Python
浅谈python3.6的tkinter运行问题
2019/02/22 Python
python如何调用百度识图api
2020/09/29 Python
python 实现控制鼠标键盘
2020/11/27 Python
利用python+request通过接口实现人员通行记录上传功能
2021/01/13 Python
德国机场停车位比较和预订网站:Ich-parke-billiger
2018/01/08 全球购物
编写类String的构造函数、析构函数和赋值函数
2012/05/29 面试题
物流司机岗位职责
2013/12/28 职场文书
生日庆典策划方案
2014/06/02 职场文书
卫校毕业生自我鉴定
2014/09/28 职场文书
党员教师自我剖析材料
2014/09/29 职场文书
英语辞职信怎么写
2015/02/28 职场文书
2015年安全生产管理工作总结
2015/05/25 职场文书
Vue实现导入Excel功能步骤详解
2021/07/03 Vue.js