微信小程序学习总结(四)事件与冒泡实例分析


Posted in Javascript onJune 04, 2020

本文实例讲述了微信小程序学习总结(四)事件与冒泡。分享给大家供大家参考,具体如下:

先来熟悉一个swiper组件,可以实现我们常见的轮播图效果。

<view>
  <swiper class='swiper' indicator-dots="true" indicator-color="rgba(0, 0, 0, .3)" autoplay="true" interval="2000">
   <swiper-item><image src='/imgs/3.jpg'></image></swiper-item>
   <swiper-item><image src='/imgs/4.jpg'></image></swiper-item>
   <swiper-item><image src='/imgs/5.jpg'></image></swiper-item>   
  </swiper>

微信小程序学习总结(四)事件与冒泡实例分析
indicator-dots=“true” 这个是显示面板的指示点

indicator-color="rgba(0, 0, 0, .3)"这个是设置小圆点的颜色

vertical='true'纵向滚动

autoplay=“true” 自动滚动,轮播图轮播图这个肯定是要有的,不可能要用户手动自己播吧

interval=“2000” 这个是设置间隔的滚动时间,单位是ms,也就是两秒

事件

<text class='moto' bindtap="onTap">开启小程序之旅</text>
Page({
 onTap:function(){
  // //页面跳转,可返回
  // wx.navigateTo({
  //  url:'../post/post'
  // })

  wx.redirectTo({
   url: '../post/post',
   success:function(res){
    console.log(res);
   }
  })
 },
})

当鼠标点击开启小程序之旅的时候,会触发onTap绑定的函数
wx.navigateTo和wx.redirectTo这两个都可以进行页面跳转,他们的区别在于,wx.navigateTo这个用于平级页面跳转,也就是它跳转页面的时候前面的页面并没有关闭,而是隐藏起来了,来来来,往下看

微信小程序学习总结(四)事件与冒泡实例分析
看看上面多了一个返回的标志
wx.redirectTo这个方法,它会把前一个页面个关闭掉

微信小程序学习总结(四)事件与冒泡实例分析
再来看看其他的方法

wx.navigateTo({
   url: '../post/post',
   success:function(res){
    console.log('跳转成功执行')
   },
   fail:function(){
    console.log("跳转失败执行")
   },
   complete:function(){
    console.log('无论成功失败都执行')
   }
  })

这两个跳转相对应的方法,来看一下

一个是onUnload,另一个是onHide

//页面隐藏的时候调用
 onHide:function () {
  console.log('haha')
 },
 //页面被关闭时
 onUnload:function(){
  console.log('hahah')
 },

冒泡事件

也就是当触发子节点的时候,父节点也会受到影响。

我们来你看一个例子

<view class='moto-container' bindtap='onContainerTap'>
			<text class='moto' bindtap="onSubTap">开启小程序之旅</text>
	</view>
onContainerTap:function(){
  console.log('onContainerTap')
 },
 onSubTap:function(){
  console.log('sub')
 }

愁一愁控制台啥样
微信小程序学习总结(四)事件与冒泡实例分析
父节点受到影响
怎么解决?来看。

<view class='moto-container' bindtap='onContainerTap'>
			<text class='moto' catchtap="onTap">开启小程序之旅</text>
	</view>

把bindtap改成catchtap就好,父节点不会受到影响。

获取Page数据

page({
data:{name:"test"},
	showData:function(){
		var text=this.data.name
		console.log(text);
	}
})

希望本文所述对大家微信小程序设计有所帮助。

Javascript 相关文章推荐
将HTML自动转为JS代码
Jun 26 Javascript
js操作时间(年-月-日 时-分-秒 星期几)
Jun 20 Javascript
Mac/Windows下如何安装Node.js
Nov 22 Javascript
jquery bind(click)传参让列表中每行绑定一个事件
Aug 06 Javascript
jQuery插件制作之参数用法实例分析
Jun 01 Javascript
JavaScript正则表达式中的ignoreCase属性使用详解
Jun 16 Javascript
jQuery ajax 当async为false时解决同步操作失败的问题
Nov 18 Javascript
JS中的JSON对象的定义和取值实现代码
May 09 Javascript
Node配合WebSocket做多文件下载以及进度回传
Nov 07 Javascript
JS实现滑动插件
Jan 15 Javascript
使用 UniApp 实现小程序的微信登录功能
Jun 09 Javascript
ajax jquery实现页面某一个div的刷新效果
Mar 04 jQuery
微信小程序学习总结(三)条件、模板、文件引用实例分析
Jun 04 #Javascript
微信小程序实现watch监听
Jun 04 #Javascript
微信小程序学习总结(二)样式、属性、模板操作分析
Jun 04 #Javascript
实现一个Vue自定义指令懒加载的方法示例
Jun 04 #Javascript
vue基础知识--axios合并请求和slot
Jun 04 #Javascript
vue webpack build资源相对路径的问题及解决方法
Jun 04 #Javascript
微信小程序学习总结(一)项目创建与目录结构分析
Jun 04 #Javascript
You might like
php获取访问者IP地址汇总
2015/04/24 PHP
thinkPHP模板中函数的使用方法示例
2016/11/30 PHP
PHP单元测试框架PHPUnit用法详解
2019/01/23 PHP
浅谈PHP无限极分类原理
2019/03/14 PHP
日期函数扩展类Ver0.1.1
2006/09/07 Javascript
fancybox modal的完美解决(右上的X)
2012/10/30 Javascript
jquery通过load获取文件的内容并跳到锚点的方法
2015/01/29 Javascript
JavaScript数组常用方法
2015/03/02 Javascript
关于JS中的apply,call,bind的深入解析
2016/04/05 Javascript
jQuery图片左右滚动代码 有左右按钮实例
2016/06/20 Javascript
第四篇Bootstrap网格系统偏移列和嵌套列
2016/06/21 Javascript
用jquery快速解决IE输入框不能输入的问题
2016/10/04 Javascript
详解Angular2 之 结构型指令
2017/06/21 Javascript
[js高手之路]单例模式实现模态框的示例
2017/09/01 Javascript
js判断节假日实例代码
2017/12/27 Javascript
vue实现树形菜单效果
2018/03/19 Javascript
浅析vue-router jquery和params传参(接收参数)$router $route的区别
2018/08/03 jQuery
node.js使用express框架进行文件上传详解
2019/03/03 Javascript
微信小程序new Date()方法失效问题解决方法
2019/07/29 Javascript
解决Vue动态加载本地图片问题
2019/10/09 Javascript
[01:15:12]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#4Newbee VS CDEC
2016/03/03 DOTA
进一步探究Python的装饰器的运用
2015/05/05 Python
python统计日志ip访问数的方法
2015/07/06 Python
浅谈python内置变量-reversed(seq)
2017/06/21 Python
详解django中url路由配置及渲染方式
2019/02/25 Python
PyCharm+Qt Designer+PyUIC安装配置教程详解
2019/06/13 Python
Flask配置Cors跨域的实现
2019/07/12 Python
Python二元算术运算常用方法解析
2020/09/15 Python
python向xls写入数据(包括合并,边框,对齐,列宽)
2021/02/02 Python
猎人靴英国官网:Hunter Boots
2017/02/02 全球购物
Tomcat的缺省是多少,怎么修改
2014/04/09 面试题
2014年禁毒工作总结
2014/11/24 职场文书
求职信范文怎么写
2015/03/19 职场文书
2019各种保证书范文
2019/06/24 职场文书
我的收音机情缘
2022/04/05 无线电
HTML静态页面获取url参数和UserAgent的实现
2022/08/05 HTML / CSS