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


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 相关文章推荐
使用prototype.js 的时候应该特别注意的几个问题.
Apr 12 Javascript
Jquery从头学起第四讲 jquery入门教程
Aug 01 Javascript
Event altKey,ctrlKey,shiftKey属性解析
Dec 18 Javascript
教你如何使用node.js制作代理服务器
Nov 26 Javascript
javascript生成不重复的随机数
Jul 17 Javascript
如何理解Vue的.sync修饰符的使用
Aug 17 Javascript
JS实现的DOM插入节点操作示例
Apr 04 Javascript
vue cli安装使用less的教程详解
Jul 12 Javascript
layui layer select 选择被遮挡的解决方法
Sep 21 Javascript
node.js express捕获全局异常的三种方法实例分析
Dec 27 Javascript
关于vue属性使用和不使用冒号的区别说明
Oct 22 Javascript
vue+spring boot实现校验码功能
May 27 Vue.js
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
win10环境PHP 7 安装配置【教程】
2016/05/09 PHP
用HTML/JS/PHP方式实现页面延时跳转的简单实例
2016/07/18 PHP
laravel 执行迁移回滚示例
2019/10/23 PHP
php实现快速对二维数组某一列进行组装的方法小结
2019/12/04 PHP
In Javascript Class, how to call the prototype method.(three method)
2007/01/09 Javascript
我遇到的参数传递中 双引号单引号嵌套问题
2010/02/11 Javascript
javascript判断iphone/android手机横竖屏模式的函数
2011/12/20 Javascript
JavaScript中的Promise使用详解
2015/06/24 Javascript
jQuery仿360导航页图标拖动排序效果代码分享
2015/08/24 Javascript
jquery实现点击变换导航样式的方法
2015/08/31 Javascript
【JS+CSS3】实现带预览图幻灯片效果的示例代码
2016/03/17 Javascript
AngularJS实现树形结构(ztree)菜单示例代码
2016/09/18 Javascript
select下拉框插件jquery.editable-select详解
2017/01/22 Javascript
简易Vue评论框架的实现(父组件的实现)
2018/01/08 Javascript
JavaScript 复制对象与Object.assign方法无法实现深复制
2018/11/02 Javascript
一篇文章,教你学会Vue CLI 插件开发
2019/04/17 Javascript
Vue使用NProgress进度条的方法
2019/09/21 Javascript
[06:01]刀塔次级联赛top10第一期
2014/11/07 DOTA
使用python实现baidu hi自动登录的代码
2013/02/10 Python
让python在hadoop上跑起来
2016/01/27 Python
Python编程argparse入门浅析
2018/02/07 Python
详解python Todo清单实战
2018/11/01 Python
利用python实现对web服务器的目录探测的方法
2019/02/26 Python
举例讲解Python常用模块
2019/03/08 Python
pandas 对group进行聚合的例子
2019/12/27 Python
HTML5样式控制示例代码
2013/11/27 HTML / CSS
Daniel Wellington官方海外旗舰店:丹尼尔惠灵顿DW手表
2018/02/22 全球购物
大专生自荐信
2013/10/04 职场文书
男女朋友协议书
2014/04/23 职场文书
人力资源管理专业毕业生自荐书
2014/05/25 职场文书
乡镇保密工作责任书
2014/07/28 职场文书
2014年学生党支部工作总结
2014/12/20 职场文书
汽车车尾标语大全
2015/08/11 职场文书
教师病假条范文
2015/08/17 职场文书
2016年全国爱眼日宣传教育活动总结
2016/04/05 职场文书
企业管理制度设计时要注意的几种“常见病”!
2019/04/19 职场文书