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


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 相关文章推荐
原生js实现半透明遮罩层效果具体代码
Jun 06 Javascript
Javascript实现简单的富文本编辑器附演示
Jun 16 Javascript
JavaScript动态改变HTML页面元素例如添加或删除
Aug 10 Javascript
Javascript字符串浏览器兼容问题分析
Dec 01 Javascript
JavaScript实现判断图片是否加载完成的3种方法整理
Mar 13 Javascript
js检测判断日期大于多少天的方法
May 04 Javascript
微信小程序 数据封装,参数传值等经验分享
Jan 09 Javascript
关于AngularJs数据的本地存储详解
Jan 20 Javascript
JS批量替换内容中关键词为超链接
Feb 20 Javascript
vue-cli中的webpack配置详解
Sep 25 Javascript
使用async-validator编写Form组件的方法
Jan 10 Javascript
详解React+Koa实现服务端渲染(SSR)
May 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
PHP封装类似thinkphp连贯操作数据库Db类与简单应用示例
2019/05/08 PHP
基于jquery的一个图片hover的插件
2010/04/24 Javascript
js取两个数组的交集|差集|并集|补集|去重示例代码
2013/08/07 Javascript
ajax与302响应代码测试
2013/10/23 Javascript
jQuery中toggle()函数的使用实例
2015/04/17 Javascript
Javascript中typeof 用法小结
2015/05/12 Javascript
javascript密码强度校验代码(两种方法)
2015/08/10 Javascript
JS实现可展开折叠层的鼠标拖曳效果
2015/10/09 Javascript
原生js实现电商侧边导航效果
2017/01/19 Javascript
vue下跨域设置的相关介绍
2017/08/26 Javascript
JavaScript实现短暂提示框功能
2018/04/04 Javascript
关于Mac下安装nodejs、npm和cnpm的教程
2018/04/11 NodeJs
React全家桶环境搭建过程详解
2018/05/18 Javascript
vue-router权限控制(简单方式)
2018/10/29 Javascript
Vue分页效果与购物车功能
2019/12/13 Javascript
Python中不同进制互相转换(二进制、八进制、十进制和十六进制)
2015/04/05 Python
python类装饰器用法实例
2015/06/04 Python
Python反射的用法实例分析
2018/02/11 Python
解决python报错MemoryError的问题
2018/06/26 Python
python装饰器练习题及答案
2019/11/01 Python
python将logging模块封装成单独模块并实现动态切换Level方式
2020/05/12 Python
详解Pandas 处理缺失值指令大全
2020/07/30 Python
一款纯css3实现的鼠标悬停动画按钮
2014/12/29 HTML / CSS
用html5的canvas画布绘制贝塞尔曲线完整代码
2013/08/14 HTML / CSS
英国领先的男士美容护发用品公司:Mankind
2016/08/31 全球购物
印度在线内衣和时尚目的地:Zivame
2017/09/28 全球购物
李维斯牛仔裤荷兰官方网站:Levi’s NL
2020/08/23 全球购物
请解释流与文件有什么不同
2016/07/29 面试题
高中毕业生自我鉴定
2013/11/03 职场文书
行政监察建议书
2014/05/19 职场文书
声乐专业大学生职业生涯规划书:理想的未来需要自己去打造
2014/09/20 职场文书
开展党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
政风行风自查自纠报告
2014/10/21 职场文书
前台接待岗位职责
2015/02/03 职场文书
2016学校先进集体事迹材料
2016/02/29 职场文书
Python自动化测试PO模型封装过程详解
2021/06/22 Python