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


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 相关文章推荐
发布一个基于javascript的动画类 Fx.js
Nov 05 Javascript
通过下拉框的值来确定输入框是否可以为空的代码
Oct 18 Javascript
判断js对象是否拥有某一个属性的js代码
Aug 16 Javascript
jQuery中操控hidden、disable等无值属性的方法
Jan 06 Javascript
js使用ajax读博客rss示例
May 06 Javascript
jQuery异步验证用户名是否存在示例代码
May 21 Javascript
javascript实现单击和双击并存的方法
Dec 13 Javascript
基于JS实现无缝滚动思路及代码分享
Jun 07 Javascript
jQuery中clone()函数实现表单中增加和减少输入项
May 13 jQuery
解决vue的过渡动画无法正常实现问题
Oct 31 Javascript
使用node-media-server搭建一个简易的流媒体服务器
Jan 20 Javascript
javascript进阶篇深拷贝实现的四种方式
Jul 07 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 高效率写法 推荐
2010/02/21 PHP
Windows下利用Gvim写PHP产生中文乱码问题解决方法
2011/04/20 PHP
php实现贪吃蛇小游戏
2016/07/26 PHP
phpstorm 正则匹配删除空行、注释行(替换注释行为空行)
2018/01/21 PHP
PHP下载文件函数与用法示例
2019/09/27 PHP
javascript编程起步(第六课)
2007/01/10 Javascript
Javascript图像处理思路及实现代码
2012/12/25 Javascript
js禁止页面刷新禁止用F5键刷新禁止右键的示例代码
2013/09/23 Javascript
jquery获取对象的方法足以应付常见的各种类型的对象
2014/05/14 Javascript
checkbox选中与未选中判断示例
2014/08/04 Javascript
JavaScript学习心得之概述
2015/01/20 Javascript
ClearTimeout消除闪动实例代码
2016/02/29 Javascript
AngularJs 弹出模态框(model)
2016/04/07 Javascript
bootstrap fileinput完整实例分享
2016/11/08 Javascript
浅谈jquery拼接字符串效率比较高的方法
2017/02/22 Javascript
Windows安装Node.js报错:2503、2502的解决方法
2017/10/25 Javascript
Vuex 使用及简单实例(计数器)
2018/08/29 Javascript
微信小程序中如何计算距离某个节日还有多少天
2019/07/15 Javascript
Python和php通信乱码问题解决方法
2014/04/15 Python
尝试使用Python多线程抓取代理服务器IP地址的示例
2015/11/09 Python
详解Python在七牛云平台的应用(一)
2017/12/05 Python
PyTorch快速搭建神经网络及其保存提取方法详解
2018/04/28 Python
pandas修改DataFrame列名的实现方法
2019/02/22 Python
简单了解python的break、continue、pass
2019/07/08 Python
python配置文件写入过程详解
2019/10/19 Python
Django框架ORM数据库操作实例详解
2019/11/07 Python
详解Python在使用JSON时需要注意的编码问题
2019/12/06 Python
Django集成MongoDB实现过程解析
2020/12/01 Python
什么是事务?事务有哪些性质?
2012/03/11 面试题
信息工程学院毕业生推荐信
2013/11/05 职场文书
实习教师自我鉴定
2013/12/09 职场文书
司仪主持词两篇
2014/03/22 职场文书
纪检干部现实表现材料
2014/08/21 职场文书
团员自我评价范文
2015/03/10 职场文书
您对思维方式了解多少?
2019/12/09 职场文书
教你怎么用Python实现GIF动图的提取及合成
2021/06/15 Python