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


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 相关文章推荐
Jquery的hover方法让鼠标经过li时背景变色
Sep 06 Javascript
javascript在网页中实现读取剪贴板粘贴截图功能
Jun 07 Javascript
浅谈jquery事件处理
Apr 24 Javascript
JavaScript实现LI列表数据绑定的方法
Aug 04 Javascript
基于jquery实现简单的分页控件
Mar 17 Javascript
基于JavaScript实现下拉列表左右移动代码
Feb 07 Javascript
支持移动端原生js轮播图
Feb 16 Javascript
Angular4学习笔记之新建项目的方法
Jul 18 Javascript
浅谈Vue响应式(数组变异方法)
May 07 Javascript
Vue无限滑动周选择日期的组件的示例代码
Jul 18 Javascript
JS操作字符串转数字的常见方法示例
Oct 29 Javascript
微信小程序点击生成朋友圈分享图(遇到的坑)
Jun 17 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
教你如何开启shopnc b2b2c 伪静态
2014/10/21 PHP
php获取文章内容第一张图片的方法示例
2017/07/03 PHP
在Laravel中实现使用AJAX动态刷新部分页面
2019/10/15 PHP
关于恒等于(===)和非恒等于(!==)
2007/08/20 Javascript
javascript 面向对象编程基础:封装
2009/08/21 Javascript
来自国外的页面JavaScript文件优化
2010/12/08 Javascript
推荐10个超棒的jQuery工具提示插件
2011/10/11 Javascript
jQuery 拖动层(在可视区域范围内)
2012/05/24 Javascript
js如何获取file控件的完整路径具体实现代码
2013/05/15 Javascript
Javascript表格翻页效果的具体实现
2013/10/05 Javascript
jquery中常用的函数和属性详细解析
2014/03/07 Javascript
JavaScript通过元素索引号删除数组中对应元素的方法
2015/03/18 Javascript
JavaScript数组对象赋值用法实例
2015/08/04 Javascript
javascript中对变量类型的判断方法
2015/08/09 Javascript
Highcharts入门之简介
2016/08/02 Javascript
AngularJS通过ng-route实现基本的路由功能实例详解
2016/12/13 Javascript
基于canvas实现手写签名(vue)
2020/05/21 Javascript
Python实现抓取页面上链接的简单爬虫分享
2015/01/21 Python
利用Python如何批量修改数据库执行Sql文件
2018/07/29 Python
Python OpenCV读取png图像转成jpg图像存储的方法
2018/10/28 Python
python实时获取外部程序输出结果的方法
2019/01/12 Python
Python识别html主要文本框过程解析
2020/02/18 Python
Python3如何判断三角形的类型
2020/04/12 Python
Python基于字典实现switch case函数调用
2020/07/22 Python
分享PyCharm最新激活码(真永久激活方法)不用每月找安装参数或最新激活码了
2020/12/27 Python
中国排名第一的外贸销售网站:LightInTheBox.com(兰亭集势)
2016/10/28 全球购物
德国机车企业:FC-Moto
2017/10/27 全球购物
会计专业自荐信
2014/06/03 职场文书
民主评议党员工作总结
2014/10/20 职场文书
乔布斯辞职信(中英文对照)
2015/05/12 职场文书
2015年教务工作总结
2015/05/23 职场文书
大学三好学生主要事迹范文
2015/11/03 职场文书
学习焦裕禄先进事迹心得体会
2016/01/23 职场文书
中学教代会开幕词
2016/03/04 职场文书
详解Apache SkyWalking 告警配置指南
2021/04/22 Servers
Python基础详解之描述符
2021/04/28 Python