微信小程序-消息提示框实例


Posted in Javascript onNovember 24, 2016

做Android的时候对toast是很熟悉的.微信小程序开发中toast也是重要的消息提示方式.

提示框:

wx.showToast(OBJECT)

显示消息提示框

OBJECT参数说明:微信小程序-消息提示框实例

示例代码:

wx.showToast({
 title: '成功',
 icon: 'success',
 duration: 2000
})

wx.hideToast()

隐藏消息提示框

wx.showToast({
 title: '加载中',
 icon: 'loading',
 duration: 10000
})

setTimeout(function(){
 wx.hideToast()
},2000)

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: 1000,
 timingFunction: "ease",
 delay: 0
})

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: 1000,
    timingFunction: 'ease',
  })

  this.animation = animation

  animation.scale(2,2).rotate(45).step()

  this.setData({
   animationData:animation.export()
  })

  setTimeout(function() {
   animation.translate(30).step()
   this.setData({
    animationData:animation.export()
   })
  }.bind(this), 1000)
 },
 rotateAndScale: function () {
  // 旋转同时放大
  this.animation.rotate(45).scale(2, 2).step()
  this.setData({
   animationData: this.animation.export()
  })
 },
 rotateThenScale: function () {
  // 先旋转后放大
  this.animation.rotate(45).step()
  this.animation.scale(2, 2).step()
  this.setData({
   animationData: this.animation.export()
  })
 },
 rotateAndScaleThenTranslate: function () {
  // 先旋转同时放大,然后平移
  this.animation.rotate(45).scale(2, 2).step()
  this.animation.translate(100, 100).step({ duration: 1000 })
  this.setData({
   animationData: this.animation.export()
  })
 }
})

wx.hideKeyboard()

收起键盘。

wx.stopPullDownRefresh()

停止当前页面下拉刷新。详见 页面相关事件处理函数。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS event使用方法详解
Apr 28 Javascript
JQuery一种取同级值的方式(比如你在GridView中)
Mar 15 Javascript
可恶的ie8提示缺少id未定义
Mar 20 Javascript
ie9 提示'console' 未定义问题的解决方法
Mar 20 Javascript
JavaScript遍历table表格中的某行某列并打印其值
Jul 08 Javascript
jQuery中filter()方法用法实例
Jan 06 Javascript
jQuery使用slideUp方法实现控制元素缓慢收起
Mar 27 Javascript
跟我学习javascript的闭包
Nov 16 Javascript
Bootstrap Table使用方法解析
Oct 19 Javascript
JavaScript实现多栏目切换效果
Dec 12 Javascript
canvas学习之API整理笔记(二)
Dec 29 Javascript
详解使用React制作一个模态框
Mar 14 Javascript
jQuery实现的模拟弹出窗口功能示例
Nov 24 #Javascript
基于JavaScript实现Tab选项卡切换效果
Nov 24 #Javascript
javascript实现获取图片大小及图片等比缩放的方法
Nov 24 #Javascript
网站发布后Bootstrap框架引用woff字体无法正常显示的解决方法
Nov 24 #Javascript
Javascript 数组去重的方法(四种)详解及实例代码
Nov 24 #Javascript
BootStrap树状图显示功能
Nov 24 #Javascript
Bootstrop实现多级下拉菜单功能
Nov 24 #Javascript
You might like
发款php蜘蛛统计插件只要有mysql就可用
2010/10/12 PHP
PHP中遇到BOM、编码导致json_decode函数无法解析问题
2014/07/02 PHP
浅谈PHP Cookie处理函数
2016/06/10 PHP
PHP中字符串长度的截取用法示例
2017/01/12 PHP
php微信公众号开发之二级菜单
2018/10/20 PHP
JS时间选择器 兼容IE6,7,8,9
2012/06/26 Javascript
js(jQuery)获取时间的方法及常用时间类搜集
2013/10/23 Javascript
JQuery实现展开关闭层的方法
2015/02/17 Javascript
javascript实现可全选、反选及删除表格的方法
2015/05/15 Javascript
JS 终止执行的实现方法
2016/11/24 Javascript
JS实现重新加载当前页面
2016/11/29 Javascript
wap手机端解决返回上一页的js实例
2016/12/08 Javascript
Bootstrap按钮组实例详解
2017/07/03 Javascript
微信小程序实现顶部选项卡(swiper)
2020/06/19 Javascript
浅析Vue实例以及生命周期
2018/08/14 Javascript
JavaScript 实现继承的几种方式
2021/02/19 Javascript
Python排序搜索基本算法之插入排序实例分析
2017/12/11 Python
python将每个单词按空格分开并保存到文件中
2018/03/19 Python
python进阶之多线程对同一个全局变量的处理方法
2018/11/09 Python
Python shutil模块用法实例分析
2019/10/02 Python
python之生成多层json结构的实现
2020/02/27 Python
Django多数据库配置及逆向生成model教程
2020/03/28 Python
python 实现分组求和与分组累加求和代码
2020/05/18 Python
Python列表如何更新值
2020/05/27 Python
Django中使用Json返回数据的实现方法
2020/06/03 Python
如何用Anaconda搭建虚拟环境并创建Django项目
2020/08/02 Python
CSS3只让背景图片旋转180度的实现示例
2021/03/09 HTML / CSS
时尚圣经:The Fashion Bible
2019/03/03 全球购物
荷兰睡眠专家:Beter Bed
2020/11/23 全球购物
shell的种类有哪些
2015/04/15 面试题
超市店庆活动方案
2014/08/31 职场文书
法人授权委托书
2014/09/16 职场文书
2015年三年级班主任工作总结
2015/05/21 职场文书
2015年中秋寄语
2015/07/31 职场文书
党风廉洁教育心得体会
2016/01/20 职场文书
MySQL官方导出工具mysqlpump的使用
2021/05/21 MySQL