微信小程序 弹窗自定义实例代码
微信小程序 弹窗
首先wxml代码:
<view class="myToast" hidden="{{nullHouse}}">暂无有关信息</view> <view bindtap="clickArea">点击此处</view>
注:hidden属性用于切换比较频繁的地方。
wxss代码设置弹窗样式:
.myToast{ width:240rpx; height:130rpx; line-height: 130rpx; margin:80rpx 35%; border-radius:20rpx; background-color: rgb(114,113,113); color:rgb(255,255,255); font-size: 36rpx; text-align: center; position: absolute; z-index: 100; opacity: 0.85; }
js:
Page({ data:{ nullHouse:true, //先设置隐藏 }, onLoad:function(options){ // 页面初始化 options为页面跳转所带来的参数 }, onReady:function(){ // 页面渲染完成 }, onShow:function(){ // 页面显示 }, onHide:function(){ // 页面隐藏 }, onUnload:function(){ // 页面关闭 }, clickArea:function(){ var that = this; this.setData({ nullHouse:false, //弹窗显示 }) setTimeout(function(){ that.data.nullHouse = true, //1秒之后弹窗隐藏 },1000) }, })
注:setTimeout()函数是异步的,当计算机执行到setTimeout时,此任务先暂停并保存,继续执行后续未完成的任务,当条件满足时,再将setTimeout的执行任务放回任务队列的后面,等待执行。
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
相关推荐
-
微信小程序实战之自定义模态弹窗(8)
首先看看官方提供的模态弹窗,供大家参考,具体内容如下 api如下: 示例: 这样的模态弹窗,充其量只能做个alert,提示一下信息. 但是并不能使用它来处理复杂性的弹窗业务,因此写了Michael从新自定义了一个,采用了仿原生的样式写法 wxml: <!--button--> <view class="btn" bindtap="powerDrawer" data-statu="open">button</view&
-
微信小程序 弹窗自定义实例代码
微信小程序 弹窗 首先wxml代码: <view class="myToast" hidden="{{nullHouse}}">暂无有关信息</view> <view bindtap="clickArea">点击此处</view> 注:hidden属性用于切换比较频繁的地方. wxss代码设置弹窗样式: .myToast{ width:240rpx; height:130rpx; line-heig
-
微信小程序 Toast自定义实例详解
微信小程序 Toast自定义实例详解 实现类似于Android的Toast提示 index.js: var timer; var inputinfo = ""; var app = getApp() Page({ data: { animationData:"", showModalStatus:false }, onLoad: function () { }, showModal: function () { // 显示遮罩层 var animation = wx
-
微信小程序日期选择器实例代码
/* JS代码部分 */ 3 const date = new Date() const years = [] const months = [] const days = [] const hours = [] const minutes = [] var thisMon = date.getMonth(); var thisDay = date.getDate(); for (let i = 2017; i <= date.getFullYear() + 1; i++) { years.pu
-
微信小程序 天气预报开发实例代码源码
微信小程序 天气预报 实例主要功能 自动定位所在城市 根据所定位的城市获取天气信息 显示未来几天的天气情况 查看当天天气的详情信息 先看效果图 微信小程序-天气 首页 微信小程序-天气 详情页 思路及编码部份自动定位所在城市 wx.getLocation:通过官方文档的API中可以看到wx.getLocation可以获取到当前的地理位置和速度,不过获取到的地理位置只是经纬度,而不是真正的城市名称,但我们可以根据这个经纬度来获取城市名称等信息(需要用到第三方接口),再通过城市名称和城市ID获取对应
-
微信小程序倒计时功能实例代码
本实例的主要功能是:单击按钮弹出一个半透明的弹出层,在规定的时间后才能激活关闭按钮,关闭弹出层. wxml部分 <view class="wrap"> <view class="btns"> <button formType="submit" class="btn" hover-class='btn_on' bindtap='show'>使用说明</button> <but
-
微信小程序实现自定义弹窗组件的示例代码
目录 编写组件代码 Dialog.wxml Dialog.js Dialog.wxss 调用自定义组件 上一篇中说的是小程序自带的弹窗组件,今天,我们来试试小程序的自定义组件,我们自定义一个带确定取消的弹窗组件. 首先,放一下,最终的效果图: 这是我们最后要实现的效果 那么,首先,我们创建一个组件 新建component文件夹存放我们的组件,里边存放的就是我们所用的组件,我们今天要做的事弹出框,新建文件夹popup存放我们的组件模板,点击右键选择新建component,就会自动生成组件的模板wx
-
微信小程序封装自定义弹窗的实现代码
最近在做小程序的登录,需要同时获取用户手机号和头像昵称等信息,但是小程序又不支持单个接口同时获取两种数据,因此想到自定义一个弹窗,通过弹窗按钮触发获取手机号事件.记录一下. 具体代码如下: 业务代码中: 在业务代码中引入dialog组件即可 <dialog visible="{{dialogVisible}}" showFooter="{{footerVisible}}" title="测试一下"> <view class='d
-
微信小程序实现自定义modal弹窗封装的方法
前言 小程序官方提供了 wx.showModal 方法,但样式比较固定,不能满足多元化需求,自定义势在必行~ 老规矩先上图 点击某个按钮,弹出 modal框,里面的内容可以自定义,可以是简单的文字提示,也可以输入框等复杂布局.操作完点击取消或确定关闭 modal. 如何使用 将下面的 modal.wxml .modal.wxss .modal.js .modal.json 四个文件复制到对应位置即可. 封装完之后调用起来也很简单,看看调用的代码吧 <modal show="{{showMo
-
微信小程序关键字变色实现代码实例
这篇文章主要介绍了微信小程序关键字变色实现代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1.小程序中不支持渲染indexOf使用,我们可以通过新建wps来实现 function fn(arr, arg) { var result = { indexOf: false, toString: '' } result.indexOf = arr.indexOf(arg) > -1; result.toString = arr.join(&quo
-
微信小程序实现自定义动画弹框/提示框的方法实例
目录 前言 css3 实现动画 小程序动画 API-实现动画 结语 相关文档 前言 在小程序中,用户与界面进行交互时,有一些用户反馈提示,例如:触发某个按钮,从底部弹出框,从顶部弹出等 如今,有一些现成的 UI 库,虽然已经实现了的,但若只是为了实现一个底部弹出框或者自定义提示框,不引用第三方 UI 库 怎么手动原生方式去实现呢,最主要的是怎么去实现动画 css3 实现动画 如下是wxml代码 <view> <view class="click-btn" catcht
随机推荐
- QQ好友列表树形列表java代码实现代码
- java string类型转换boolean类型的方法
- php逐行读取txt文件写入数组的方法 原创
- 帖几个PHP的无限分类实现想法~
- PHP5.3新特性小结
- C#基于TimeSpan实现倒计时效果的方法
- 磁盘已满造成的mysql启动失败问题分享
- WordPress 单页面上一页下一页的实现方法【附代码】
- PHP新手NOTICE错误常见解决方法
- 在Linux(Ubuntu)下搭建PHP环境的操作步骤
- mongoDB实现分页的方法
- SQL Server的基本功能性语句介绍
- Jquery实现的简单轮播效果【附实例】
- jQuery控制网页打印指定区域的方法
- javascript 日期联动选择器 [其中的一些代码值得学习]
- JavaScript 文本框下拉提示(自动提示)
- SERV-U 的配置文件详解
- Android中activity的启动模式
- Java基础知识杂文
- java通过HttpServletRequest获取post请求中的body内容的方法