微信小程序-提示框
提示框:
wx.showToast(OBJECT)
显示消息提示框
OBJECT参数说明:
示例代码:
wx.showToast({ title: '成功', icon: 'success', duration: })
wx.hideToast()
隐藏消息提示框
wx.showToast({ title: '加载中', icon: 'loading', duration: }) setTimeout(function(){ wx.hideToast() },)
wx.showModal(OBJECT)
显示模态弹窗
OBJECT参数说明:
示例代码:
wx.showModal({ title: '提示', content: '这是一个模态弹窗', success: function(res) { if (res.confirm) { console.log('用户点击确定') } } })
wx.showActionSheet(OBJECT)
显示操作菜单
OBJECT参数说明:
success返回参数说明:
示例代码:
wx.showActionSheet({ itemList: ['A', 'B', 'C'], success: function(res) { if (!res.cancel) { console.log(res.tapIndex) } } })
设置导航条
wx.setNavigationBarTitle(OBJECT)
动态设置当前页面的标题。
OBJECT参数说明:
示例代码:
wx.setNavigationBarTitle({ title: '当前页面' })
wx.showNavigationBarLoading()
在当前页面显示导航条加载动画。
wx.hideNavigationBarLoading()
隐藏导航条加载动画。
页面跳转:
wx.navigateTo(OBJECT)
保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack
可以返回到原页面。
OBJECT参数说明:
示例代码:
wx.navigateTo({ url: 'test?id=1' })
//test.js Page({ onLoad: function(option){ console.log(option.query) } })
注意:为了不让用户在使用小程序时造成困扰,我们规定页面路径只能是五层,请尽量避免多层级的交互方式。
wx.redirectTo(OBJECT)
关闭当前页面,跳转到应用内的某个页面。
OBJECT参数说明:
示例代码:
wx.redirectTo({ url: 'test?id=1' })
wx.navigateBack(OBJECT)
关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages()
) 获取当前的页面栈,决定需要返回几层。
OBJECT参数说明:
动画:
wx.createAnimation(OBJECT)
创建一个动画实例animation。调用实例的方法来描述动画。最后通过动画实例的export
方法导出动画数据传递给组件的animation
属性。
注意: export
方法每次调用后会清掉之前的动画操作
OBJECT参数说明:
var animation = wx.createAnimation({ transformOrigin: "50% 50%", duration: , timingFunction: "ease", delay: })
animation
动画实例可以调用以下方法来描述动画,调用结束后会返回自身,支持链式调用的写法。
样式:
旋转:
缩放:
偏移:
倾斜:
矩阵变形:
动画队列
调用动画操作方法后要调用 step()
来表示一组动画完成,可以在一组动画中调用任意多个动画方法,一组动画中的所有动画会同时开始,一组动画完成后才会进行下一组动画。step 可以传入一个跟 wx.createAnimation()
一样的配置参数用于指定当前组动画的配置。
示例:
<view animation="{{animationData}}" style="background:red;height:100rpx;width:100rpx"></view>
Page({ data: { animationData: {} }, onShow: function(){ var animation = wx.createAnimation({ duration: , timingFunction: 'ease', }) this.animation = animation animation.scale(,).rotate().step() this.setData({ animationData:animation.export() }) setTimeout(function() { animation.translate().step() this.setData({ animationData:animation.export() }) }.bind() }, rotateAndScale: function () { // 旋转同时放大 ).scale(, ).step() this.setData({ animationData: this.animation.export() }) }, rotateThenScale: function () { // 先旋转后放大 ).step() , ).step() this.setData({ animationData: this.animation.export() }) }, rotateAndScaleThenTranslate: function () { // 先旋转同时放大,然后平移 ).scale(, ).step() , ).step({ duration: }) this.setData({ animationData: this.animation.export() }) } })
wx.hideKeyboard()
收起键盘。
wx.stopPullDownRefresh()
停止当前页面下拉刷新。详见 页面相关事件处理函数。
微信小程序-提示框的更多相关文章
- 微信小程序提示框
一.wx.showToast 如上图所示,showToast会显示一个弹窗,在指定的时间之后消失.中间的图标默认只有加载中和成功两种,也可以用image参数自定义图标 wx.showToast({ t ...
- 微信小程序 提示框延时跳转
wx.showToast({ title: '成功', icon: 'success', duration: 2000, success:function(){ console.log('haha') ...
- 微信小程序 —搜索框
wxSearch优雅的微信小程序搜索框 一.功能 支持自定义热门key 支持搜索历史 支持搜索建议 支持搜索历史(记录)缓存 二.使用 1.将wxSearch文件夹整个拷贝到根目录下 2.引入 // ...
- 微信小程序- 提示不在以下合法域名列表中
第一次开发微信小程序时在访问后台数据时总是提示 提示上面问题主要有两个原因: 1.为配置安全合法域名列表: 微信小程序在开发时需要在官网配置固定的数据来源网站: 登录小程序平台中->设置: 图中 ...
- 小程序点击跳转外部链接 微信小程序提示:不支持打开非业务域名怎么办 使用web-view 配置业务域名
小程序点击跳转外部页面 1.index.wxml 添加点击事件 标签可以是小程序支持的 <!-- 邀请好友 --> <cover-image src='/img/invitat ...
- 微信小程序----搜索框input回车搜索事件
在微信小程序里的搜索框,按软键盘回车键触发搜索事件. <input type="text" placeholder="搜索" value="{ ...
- 微信小程序弹框提示绑定手环实例
今天想聊一聊小程序里面存在的一些逻辑问题,拿手上的这个小程序来说,(这个小程序是开发出来玩的,每个人手上有一个手环,带着手环时候的心率,运动步数,血压数据都会展现在这个小程序里面,一目了然)用户第一次 ...
- 自制微信小程序 提示插件 -- noticeUitis.js
/* noticeMsg.js by: FEer_llx Modify 2016/08/24 */ function weNotice(obj) { this.fadeFlag = true; thi ...
- 微信小程序toast框的使用
1.wx.showToast() 方法可以配置toast框的提示文字,消失的时间,显示的图标 wx.showToast({ title: '请链接网络', icon:"none", ...
随机推荐
- SpringSecurity操作指南-基于Spring、SpringMVC和MyBatis自定义SpringSecurity权限认证规则
- iOS,视图相关
1.移除视图的所以子视图 2.自定义视图(UIView) 3.处理悬浮窗口(类似微信视频),等比缩放 4.自定义前面视图(可以手写字) 5.图片拉伸的几种方式,计算文本占用空间大小 6.UILable ...
- Macaca开源--阿里的移动自动化测试框架
https://github.com/macacajs/macaca-cli 项目在此 https://macacajs.github.io/macaca/cli-usage.html 文档在此 项目 ...
- css3(border-radius)边框圆角详解
传统的圆角生成方案,必须使用多张图片作为背景图案.CSS3的出现,使得我们再也不必浪费时间去制作这些图片了,只需要border-radius属性,支持浏览器IE 9.Opera 10.5.Safari ...
- python爬虫
预:网页的组成 HTML(结构)+css(样式)+javascript(功能) 爬虫主要针对的是HTML和css HTML: <div></div>div标签 代表网页中某个区 ...
- 《玩转D语言系列》一、通过四个版本的 Hello Word 初识D语言
对于D语言,相信很多朋友还没听说过,因为它还不够流行,跟出自名门的一些语言比起来也没有名气,不过这并不影响我对它的偏爱,我就是这样的一种人,我喜欢的女孩子一定是知己型,而不会因为她外表,出身,学历,工 ...
- HAL驱动库学习-ADC
如何使用ADC驱动库 1 实现如下两个函数 a: HAL_ADC_MspInit()使能ADC时钟,设置时钟源, 使能ADC Pin,设置为输入模式,可选 DMA,中断 b:HAL_ ...
- nginx,控浏览器缓存,前端优化方案
1,困惑 做web项目,对于开发者来说,一个最头痛的问题就是浏览器缓存,有缓存,js更改了,html更改了,发布服务器以后用户往往无法通过浏览器访问到最新的类容,需要用户主动去刷新页面, 因为一直做企 ...
- MySql 绿色版配置
1.下载MySQL http://www.mysql.com/downloads/ 2.配置my.ini # The MySQL server [mysqld] #主目录 basedir = D:/m ...
- 我认识的log4j开源日志
Log4j 在java中如何配置log4j!! 步骤: ①引入jar包,推荐新建一个lib文件夹,用来装所有的jar包(还要进行下图内的操作) 之后项目中就会多出一个引入外部Library的项目 ②创 ...