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


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 相关文章推荐
用 JavaScript 迁移目录
Dec 18 Javascript
js loading加载效果实现代码
Nov 24 Javascript
JS基础之undefined与null的区别分析
Aug 08 Javascript
Node.js 制作实时多人游戏框架
Jan 08 Javascript
JS如何判断浏览器类型和详细区分IE各版本浏览器
Mar 04 Javascript
深入理解基于vue-cli的vuex配置
Jul 24 Javascript
深入理解JS的事件绑定、事件流模型
May 13 Javascript
Bootstrap Fileinput 4.4.7文件上传实例详解
Jul 25 Javascript
JS实现的全选、全不选及反选功能【案例】
Feb 19 Javascript
vue-cli 3.x配置跨域代理的实现方法
Apr 12 Javascript
vue实现pdf文档在线预览功能
Nov 26 Javascript
js实现全选和全不选
Jul 28 Javascript
微信小程序学习总结(三)条件、模板、文件引用实例分析
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简单浏览目录内容的实现代码
2013/06/07 PHP
PHP中的socket_read和socket_recv区别详解
2015/02/09 PHP
PHP贪婪算法解决0-1背包问题实例分析
2015/03/23 PHP
PHP实现找出有序数组中绝对值最小的数算法分析
2017/08/07 PHP
浅谈PHP中如何实现Hook机制
2017/11/14 PHP
PHP设计模式之委托模式定义与用法简单示例
2018/08/13 PHP
在 Laravel 中动态隐藏 API 字段的方法
2019/10/25 PHP
Extjs4 GridPanel 的几种样式使用介绍
2013/04/18 Javascript
浅析tr的隐藏和显示问题
2014/03/05 Javascript
理解javascript中Map代替循环
2016/02/26 Javascript
JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
2016/08/05 Javascript
JS查找字符串中出现次数最多的字符
2016/09/05 Javascript
详解在 Angular 项目中添加 clean-blog 模板
2017/07/04 Javascript
详解redis在nodejs中的应用
2018/05/02 NodeJs
vue-cli 使用axios的操作方法及整合axios的多种方法
2018/09/12 Javascript
vue使用i18n实现国际化的方法详解
2019/09/05 Javascript
微信小程序实现签字功能
2019/12/23 Javascript
javascript设计模式 ? 命令模式原理与用法实例分析
2020/04/20 Javascript
Python随机生成信用卡卡号的实现方法
2015/05/14 Python
详解python中的json的基本使用方法
2016/12/21 Python
python实现Windows电脑定时关机
2018/06/20 Python
python爬虫URL重试机制的实现方法(python2.7以及python3.5)
2018/12/18 Python
windows下安装Python虚拟环境virtualenvwrapper-win
2019/06/14 Python
基于Python脚本实现邮件报警功能
2020/05/20 Python
html5标记文字_动力节点Java学院整理
2017/07/11 HTML / CSS
Speedo速比涛德国官方网站:世界领先的泳装品牌
2019/08/26 全球购物
澳大利亚最受欢迎的超级商场每日优惠:Catch
2020/11/17 全球购物
学生手册家长评语
2014/02/10 职场文书
创建无烟单位实施方案
2014/03/29 职场文书
《云房子》教学反思
2014/04/20 职场文书
单位消防安全责任书
2014/07/23 职场文书
推广活动策划方案
2014/08/23 职场文书
2015试用期转正工作总结
2014/12/12 职场文书
读后感作文评语
2014/12/25 职场文书
详解OpenCV曝光融合
2022/04/29 Python
mysqldump进行数据备份详解
2022/07/15 MySQL