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

做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 = animationanimation.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()

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

微信小程序-消息提示框实例相关推荐

微信小程序自定义提示框制作的简单方法
微信小程序自定义提示框制作的简单方法下面的时候提示框的结构 wxml部分  <view class="showToast" wx:if= ...
微信小程序之提示框弹框
1.显示消息提示框,长度不超过12个字节,即6个汉字 wx.showToast({ title: '演示1', }) 2.显示loading提示框,主动调用wx.hideLoading()才能关闭 w ...
微信小程序tooltip提示框组件
需要将文件引入需要插件的.json文件的usingComponents里. 算了,直接看代码理解把,有问题联系会及时回复. 文件结构,我这里组件放在根目录的cpmponents文件夹里面 index. ...
【微信小程序】提示框、选择框、选择菜单
一.提示框 wx.showToast({title: '刷新成功',//提示文字duration:2000,//显示时长mask:true,//是否显示透明蒙层,防止触摸穿透,默认:false ico ...
微信小程序之提示框
结构可自行修改 <view class="showModule" wx:if="{{isShow}}" ><!-- 这部分内容可以灵活修改,例 ...
微信小程序的提示框 showToast 去掉勾，设置icon为null没有效果
设置icon为null这个功能是在1.9之后的版本才支持的,所以需要修改版本号,project.config.json这里文件里面,在根目录下 ,亲们,有用就给个赞吧,谢谢
php微信小程序物流进度推送,微信小程序消息推送php服务器验证实例详解
微信小程序消息推送php服务器验证实例详解设置页面("设置">>"开发设置"): 1.设置服务器域名注意http和https协议的不同. 2. ...
下拉多选框微信小程序_微信小程序下拉框功能的实例代码
微信小程序组件里没有下拉框,正好要用到,记下来以后参考 wxml代码选择接收班级 {{grade_name}} {{item}} wxss代码 /* 顶部 */ .top{ width: 100vw ...
微信小程序消息推送，实现未完成计划的在微信内的定时提醒功能
微信小程序消息提醒(微信内提醒) 提示:此处仅是小程序消息提醒的一个小例子,希望能够为大家抛砖引玉目录微信小程序消息提醒(微信内提醒) 需求及效果展示一.实现思路二.实现步骤 1.获取模板ID ...

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

微信小程序-消息提示框实例相关推荐

最新文章

热门文章