微信小程序点击按钮弹出弹窗_微信小程序弹窗,微信小程序页面跳转、弹出框...

微信小程序弹窗,微信小程序页面跳转、弹出框

浏览量：2396

时间：2019-12-09

来源：Reyon_

一、页面跳转页面跳转是微信小程序中使用较为频繁并且很重要的功能之一，页面跳转一般是通过点击按钮或者文本区域后需要进行的操作。

页面跳转中需要注意的点很多，我在这就介绍一些我在写项目过程中所遇到的一些情况里的跳转方式。

1，一般情况一般情况下，在点击了按钮或文本之后，跳转到另一个页面。

.wxmlbuttonbindtap='bu'setting/buttonviewbindtap='te'texthello/text/view很简单，在wxml中只需添加bindtap属性，然后在js中增加相对应的函数。

.jste(event){wx.navigateTo({url:'',})},bu(event){wx.navigateTo({url:'',})},在函数中只需使用自带的navigateTo方法即可跳转到指定页面。url中填写目标页面的路径。

2，switchTab在写项目的过程中，我发现navigateTo并不能跳转到属于tabBar的目标页面。tabBar又只能唯一存在在app.json中。这时就该switchTab上场了。

switchTab是专门为tabBar服务的页面跳转方法。

.jsbu(event){wx.switchTab({url:''})},只需把navigateTo更改为switchTab即可。

3，bindtap和catchtap写项目时经常会遇到多级点击事件，这时就需要明确区分bindtap和catchtap。

进行页面跳转的按钮或文本有时也会遇到上级布局中也存在着点击事件的情况。

.wxmlviewbindtap='sum'viewtexthello/text/viewbuttonbindtap='bu'setting/button/view这种情况常有发生，这时点击按钮就会发现sum函数又执行了一遍。而本意是只执行bu函数。这就是因为bindtap它会触发父级点击事件，catchtap与bindtap完全不同。

catchtap不会触发父级点击事件，只触发当前的点击事件。

.wxmlviewbindtap='sum'viewtexthello/text/viewbuttoncatchtap='bu'setting/button/view将内部的bindtap改为catchtap，则不会触发父级sum点击事件。

4，传值跳转页面跳转时，有时需要进行数据的传递，掌握这个技巧就非常重要了。

传递.jswx.navigateTo({url:'pages/my?name='+it+'&pass='+pa;})url中拼接上要传递的id以及对应的值

接收时，在onLoad函数中直接接收

接收onLoad:function(options){varname=options.name;varpass=options.pass;}这样就完成了数据在页面中的传递。

二、弹出框1，showToast安卓中有toast弹出框，微信小程序中也有相对应的showToast方法。

showToast在项目实践中也是使用非常频繁的方法。

.jswx.showToast({title:'成功',icon:'success',image：''duration:2000//持续时间mask：true//是否使用蒙层})icon目前只支持success和loading两种。

但也可以添加图片来实现其它弹出内容。

2，showLoadingshowLoading方法专门用于显示正在加载的消息提示框。

只有两个参数

.jswx.showLoading({title:'加载中',mask:true})showLoading()的关闭必须要使用hideLoading()方法。

3，VantWeapp微信只提供以上两种弹出框，这很难满足很多小程序的需要，这里推荐一个UI组件库，里面有美观且功能强大的组件。有很多种美丽的弹出框，操作简单，适合小白，有需要的可以去看看。

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题，烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ，我们将及时处理。本站文章仅作分享交流用途，作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关，请知悉。