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


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 16 Javascript
详细分析使用AngularJS编程中提交表单的方式
Jun 19 Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
Jan 21 Javascript
jQuery头像裁剪工具jcrop用法实例(附演示与demo源码下载)
Jan 22 Javascript
Angularjs整合微信UI(weui)
Mar 15 Javascript
详解Backbone.js框架中的模型Model与其集合collection
May 05 Javascript
jquery购物车结算功能实现方法
Oct 29 Javascript
jQuery实现锚点向下平滑滚动特效示例
Aug 29 jQuery
jQuery plugin animsition使用小结
Sep 14 jQuery
vue中动态select的使用方法示例
Oct 28 Javascript
JQuery中的常用事件、对象属性与使用方法分析
Dec 23 jQuery
javascript实现简易计算器功能
Sep 23 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
快速配置PHPMyAdmin方法
2008/06/05 PHP
php实现数组按指定KEY排序的方法
2015/03/30 PHP
PHP实现求两个字符串最长公共子串的方法示例
2017/11/17 PHP
PHP实现链式操作的三种方法详解
2017/11/16 PHP
让whoops帮我们告别ThinkPHP6的异常页面
2020/03/02 PHP
YII2框架中查询生成器Query()的使用方法示例
2020/03/18 PHP
jQuery实现鼠标移到元素上动态提示消息框效果
2013/10/20 Javascript
jQuery元素选择器用法实例
2014/12/23 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖动基本操作
2015/11/30 Javascript
详解JavaScript时间格式化
2015/12/23 Javascript
轻松理解vue的双向数据绑定问题
2017/10/30 Javascript
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
2020/02/25 Javascript
Vue Object.defineProperty及ProxyVue实现双向数据绑定
2020/09/02 Javascript
解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)
2020/11/11 Javascript
[51:26]VP vs VG 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
详尽讲述用Python的Django框架测试驱动开发的教程
2015/04/22 Python
将Django框架和遗留的Web应用集成的方法
2015/07/24 Python
Python控制多进程与多线程并发数总结
2016/10/26 Python
Python实现的建造者模式示例
2018/08/06 Python
python中单例常用的几种实现方法总结
2018/10/13 Python
python匹配两个短语之间的字符实例
2018/12/25 Python
浅析Python 中几种字符串格式化方法及其比较
2019/07/02 Python
python飞机大战 pygame游戏创建快速入门详解
2019/12/17 Python
python十进制转二进制的详解
2020/02/07 Python
乌克兰电子和家用电器商店:Foxtrot
2019/07/23 全球购物
阿迪达斯香港官网:adidas香港
2019/11/09 全球购物
参观考察邀请函范文
2014/01/29 职场文书
精通CAD能手自荐书
2014/01/31 职场文书
大学生见习报告范文
2014/11/03 职场文书
小学教师党员承诺书
2015/04/27 职场文书
2016公司年会主持词
2015/07/01 职场文书
培训计划通知
2015/07/15 职场文书
Go语言安装并操作redis的go-redis库
2022/04/14 Golang
MySQL如何使备份得数据保持一致
2022/05/02 MySQL
springboot实现string转json json里面带数组
2022/06/16 Java/Android
Mybatis 一级缓存和二级缓存原理区别
2022/09/23 Java/Android