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

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

先来熟悉一个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);
	}
})

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

赞 (0)

相关推荐

  • 微信小程序冒泡事件及其阻止方法实例分析

    微信小程序冒泡事件及其阻止方法实例分析

    本文实例讲述了微信小程序冒泡事件及其阻止方法.分享给大家供大家参考,具体如下: 事件的类别分为几种: 点击事件:tap 长按事件:longtap 触摸事件:touchstart: touchend:touchcancel:touchmove 其他:input:submit.... 其中前三类是冒泡事件,其他的称为非冒泡事件. 写一个简单的例子,代码就不一一贴出来了,WXML的文件如下: <view class='redview' bindtap='redclick'> 红色 <view

  • 微信小程序 冒泡事件原理解析

    微信小程序 冒泡事件原理解析

    在微信小程序的事件分为冒泡事件和非冒泡事件: 冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递. 非冒泡事件:当一个组件上的事件被触发后,该事件不会向父节点传递. WXML的冒泡事件列表: 类型 触发条件 最低版本 touchstart 手指触摸动作开始   touchmove 手指触摸后移动   touchcancel 手指触摸动作被打断,如来电提醒,弹窗   touchend 手指触摸动作结束   tap 手指触摸后马上离开   longpress 手指触摸后,超过350ms再离开

  • 微信小程序 实现拖拽事件监听实例详解

    微信小程序 实现拖拽事件监听实例详解

    微信小程序 拖拽监听功能: 在软件开发或者 APP应用开发的时候,经常会遇到拖拽监听,最近自己学习微信小程序的知识,就想实现这样的拖拽效果,这里就记录下. 需要做个浮在scroll-view之上的button.尝试了一下. 上GIF: Android中也会有类似移动控件的操作.思路差不多.获取到位移的X Y 的变量,给控件设置坐标. 1.index.wxml ../images/gundong.png" bindtap="ballClickEvent" style="

  • 微信小程序 触控事件详细介绍

    微信小程序 触控事件详细介绍

    微信小程序 触控事件: 微信小程序的"事件"挺有意思.看了说明文档后发现它的功能很全,事件可以向父节点传递,而且打印这个事件的信息很透明,调试起来应该非常方便. 接下来把文档copy过来 原文地址:https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html >>>什么是事件 事件是视图层到逻辑层的通讯方式. 事件可以将用户的行为反馈到逻辑层进行处理. 事件可以绑定在组件上,当达到触发

  • 微信小程序之绑定点击事件实例详解

    微信小程序之绑定点击事件实例详解

    微信小程序之绑定点击事件实例详解 微信小程序出来那么久了,趁着有时间自己研究一下,前阶段看一了一下,但是不允许个人注册,现在已经对个人开放了,所以爱好者们可以自己研究了. 首先,我们看一下如何添加底部的标签栏:在app.json里操作 { "pages":[ //在这里添加页面的路径 "pages/index/index", "pages/logs/logs", "pages/home/home" ], "windo

  • 微信小程序bindtap事件与冒泡阻止详解

    bindtap就是点击事件 在.wxml文件绑定: <text id='textId' data-userxxx='100' bindtap='tapMessage'>cilck here</text> 在一个组件的属性上添加bindtap并赋予一个值(一个函数名) 当点击该组件时, 会触发相应的函数执行 在后台.js文件中定义tapMessage函数: //index.js Page({ data: { mo: 'Hello World!!', userid : '1234',

  • 微信小程序 页面滑动事件的实例详解

    微信小程序--页面滑动事件 wxml: <view id="id" class = "ball" bindtap = "handletap" bindtouchstart = "handletouchtart" bindtouchmove="handletouchmove" bindtouchend="handletouchend" style = "width : 10

  • 微信小程序 动态绑定数据及动态事件处理

    微信小程序 动态绑定数据及动态事件处理 关键核心代码 <image class="midimage" data-Type="{{item.Type}}" data-BillCode="{{item.BillCode}}" data-src="{{item.imgurl}}" src="{{item.imgurl}}" mode="scaleToFill" bindtap="

  • 微信小程序 页面跳转事件绑定的实例详解

    微信小程序 页面跳转事件绑定的实例详解 什么是事件 事件是视图层到逻辑层的通讯方式. 事件可以将用户的行为反馈到逻辑层进行处理. 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数. 事件对象可以携带额外信息,如 id, dataset, touches. 在组件中绑定一个事件处理函数. 如bindtap,当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数 <view bindtap="view"> <text bindtap

  • 微信小程序学习总结（五）常见问题实例小结

    微信小程序学习总结（五）常见问题实例小结

    本文实例总结了微信小程序常见问题.分享给大家供大家参考,具体如下: 问题一 先来看我遇到的第一个问题 以下是我创建的目录 当创建完这个json文件之后,报了下面一个错 这个是我的报错信息. 解决方法:打开这个json文件,输入两个一对花括号完事. 问题二 以下是我引入js的代码,绝对路径报错. var postsData = require('/data/post-data.js') 报错信息: Uncaught Error: module "pages/post/data/post-data.

  • 微信 小程序前端源码详解及实例分析

    微信 小程序前端源码详解及实例分析

    微信小程序前端源码逻辑和工作流 看完微信小程序的前端代码真的让我热血沸腾啊,代码逻辑和设计一目了然,没有多余的东西,真的是大道至简. 废话不多说,直接分析前端代码.个人观点,难免有疏漏,仅供参考. 文件基本结构: 先看入口app.js,app(obj)注册一个小程序.接受一个 object 参数,其指定小程序的生命周期函数等.其他文件可以通过全局方法getApp()获取app实例,进而直接调用它的属性或方法,例如(getApp().globalData) //app.js App({ onLau

  • 微信小程序中使用 async/await的方法实例分析

    本文实例讲述了微信小程序中使用 async await的方法.分享给大家供大家参考,具体如下: 微信小程序中有大量接口是异步调用,比如 wx.login().wx.request().wx.getUserInfo() 等,都是使用一个对象作为参数,并定义了 success().fail() 和 complete() 作为异步调用不同情况下的回调. 但是,以回调的方式来写程序,真的很伤,如果有一个过程需要依次干这些事情: wx.getStorage() 获取缓存数据,检查登录状态 wx.getSe

  • 微信小程序与后台PHP交互的方法实例分析

    微信小程序与后台PHP交互的方法实例分析

    本文实例讲述了微信小程序与后台PHP交互的方法.分享给大家供大家参考,具体如下: 接下来将讲后台如何与前台进行数据及图片之间的交互,相信这一点是很多人所关注的,因为当时我实在团队中负责后台开发,因此对前端不是特别了解,这里我会贴出前端开发时的部分代码截图,微信小程序的官方api介绍地址是: https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-network.html 微信与后台服务器之间的数据通信是调用wx.request(OBJECT)实现的,官

  • 微信小程序 wx.getUserInfo引导用户授权问题实例分析

    本文实例讲述了微信小程序 wx.getUserInfo引导用户授权问题.分享给大家供大家参考,具体如下: 首先,在page外定义一个函数用户判断是否为空对象 var isEmptyObject = function (e) { var temp; for (temp in e) return !1; return !0 } 然后,在page中的onload里面调用授权 onLoad: function () { var that = this; if (app.globalData.userIn

  • 微信小程序学习总结（四）事件与冒泡实例分析

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

    本文实例讲述了微信小程序学习总结(四)事件与冒泡.分享给大家供大家参考,具体如下: 先来熟悉一个swiper组件,可以实现我们常见的轮播图效果. <view> <swiper class='swiper' indicator-dots="true" indicator-color="rgba(0, 0, 0, .3)" autoplay="true" interval="2000"> <swipe

  • 微信小程序学习笔记之跳转页面、传递参数获得数据操作图文详解

    微信小程序学习笔记之跳转页面、传递参数获得数据操作图文详解

    本文实例讲述了微信小程序学习笔记之跳转页面.传递参数获得数据操作.分享给大家供大家参考,具体如下: 前面一篇介绍了微信小程序表单提交与PHP后台数据交互处理.现在需要实现点击博客标题或缩略图,跳转到博客详情页面. 开始想研究一下微信小程序的web-view组件跳转传参,把网页嵌入到小程序,结果看到官方文档的一句话打消了念头,因为没有认证...... [方法一 使用navigator组件跳转传参] 前台博客列表页面data.wxml:(后台数据交互参考上一篇) <view wx:for="{

  • 微信小程序实现bindtap等事件传参

    微信小程序实现bindtap等事件传参

    之前一直以为微信小程序按钮点击事件传参是和web端相同,即在事件中写明所传递的参数即可,但是这样尝试过以后发现小程序的控制台报错,报所写的bindtap中参数错误,之后百度发现,小程序按钮点击这类事件时一般的处理方法是指明元素所在的id,bindtap只是写明函数名,例如,bindtap='setNumber',而不是bindtap='setNumber(1)',在js中只要写function(e).通过e可以获取所传过来元素的所有信息. 什么是事件 事件是视图层到逻辑层的通讯方式. 事件可以将

随机推荐