小程序事件绑定传值和路由

自定义事件

1、事件绑定

最主要是tap事件，相当于click

通过属性绑定事件其有两种写法
- 绑定冒泡事件（不会帮我们阻止冒泡）【主要】
  - 语法：bind事件类型="方法名" 方法名不能加括号，而且不能传参
- 绑定非冒泡事件（会帮我们阻止冒泡）
  - 语法：catch事件类型="方法名" 方法名不能加括号，而且不能传参

2、事件对象

在小程序中，事件对象是给事件处理程序传递参数的唯一方式。

标签上使用data-数据名=“数据值”的形式传递

<!-- 传递参数100 -->
<view bindtap="tapHandler" id="efg" data-m="100"><!-- 传递参数abc --><view id="abc" data-abc="abc">点我触发事件</view>
</view>

常用组件

1、swiper

data: {background: ["https://storage.lynnn.cn/assets/markdown/91147/pictures/2020/11/bce52a5f143cd3e25c6c39c7a0fd7f276ce43bad.png?sign=f4ec5771f7eabd11226fe5f4b7f0f6e8&t=5fa403f2","https://storage.lynnn.cn/assets/markdown/91147/pictures/2020/11/6018ac895dd29437b1d023c121c7539ecf2e9221.jpeg?sign=47da092f8a6a1650df3da3dd3dd40cb3&t=5fa4041d","https://storage.lynnn.cn/assets/markdown/91147/pictures/2020/11/f81d133833b89a18cb1842f449810d16ec5d3c78.jpeg?sign=22eadb72caac161df642aa18b84127a8&t=5fa40431"],// 是否显示轮播图的小圆点indicatorDots: true,// 滑动方向是否为纵向vertical: false,// 是否自动轮播autoplay: true,// 自动切换时间间隔（单个图片显示的时长）interval: 2000,// 切换的持续时间duration: 500},

2、地图

<view>
<!-- 地图插件 -->
<map longitude="{{long}}" latitude="{{lat}}"></map>
</view>//app.json
onLoad: function (options) {wx.getLocation({type: 'wgs84',success:(res)=> {this.setData({long:res.longitude,lat:res.latitude})}})},

3、表单

<!-- 表单组件：按钮组件 -->
<!-- 常规按钮：底色灰白的，不易见，type值为default（可以不写） -->
<button>常规按钮</button>
<!-- 主要按钮：绿色按钮，最常用的按钮 -->
<button type="primary">主要按钮</button>
<!-- 警告按钮：底色灰色，但是字是红色 -->
<button type="warn">警告按钮</button><!-- 单选按钮组 -->
<!-- 由于单选按钮组中包含了多个radio，因此需要被包裹 -->
<radio-group><radio value="1">男</radio><radio value="2">女</radio>
</radio-group><!-- 复选框组(可以通过checked设置选中) -->
<!-- 与单选按钮组类似，也需要被包裹 -->
<checkbox-group><checkbox value="吃饭">吃饭</checkbox><checkbox value="睡觉">睡觉</checkbox><checkbox value="打DD">打DD</checkbox>
</checkbox-group><!--表单组件的标签的样式是需要自己去调节设置的 -->
<input type="text" value="zhangsan" />

组件传值

1、父传子

第一步:

第二步：

创建对应模板

组件对应的js文件中写入属性值

将属性值写入{{ }}内

2、子传父

先写方法：

方法写在methods

接收方法：

在该页面的js文件中

组件生命周期

lifetimes: {attached: function() {// 在组件实例进入页面节点树时执行},detached: function() {// 在组件实例被从页面节点树移除时执行},},// 以下是旧式的定义方式，可以保持对 <2.2.3 版本基础库的兼容attached: function() {// 在组件实例进入页面节点树时执行},detached: function() {// 在组件实例被从页面节点树移除时执行},

路由

wx.navigateTo({url: 'test?id=1',
})// 在C页面内 navigateBack，将返回A页面
wx.navigateBack({delta: 2
})

小程序事件绑定传值和路由相关推荐

微信小程序----事件绑定
前言小程序中绑定事件, 通过bind关键字来实现.如: bindtap bindinput bindchanges等不同的组件支持不同的事件,具体查看组件的说明即可. 今天我们来了解bindtap和 ...
axure8 事件改变样式_15. 教你零基础搭建小程序：小程序事件绑定（2）
图文版本章继续讲解小程序的事件绑定的相关知识,上一章我们实现了第一个需求, 当在输入框中输入文字,比如123, 会如实地映射至下面的标签文件中,显示123: 如果上方的输入框文字改变,对应下方的标签 ...
input 事件_14. 教你零基础搭建小程序：小程序事件绑定（1）
图文版本章以及下一章学习小程序的事件绑定,我们通过一个案例来讲解其中相关的知识点,便于大家理解哦~~ 首先,先来看这个案例的需求. 我们使用画图工具,先在上面绘制一个小程序页面, 如下图: 再在页面 ...
小程序如何用data的数据控制页面展示_17. 教你零基础搭建小程序：小程序事件绑定（1）
本章以及下一章学习小程序的事件绑定,我们通过一个案例来讲解其中相关的知识点,便于大家理解哦~~ 首先,先来看这个案例的需求. 我们使用画图工具,先在上面绘制一个小程序页面,如下图: 再在页面的最上方放 ...
前端学习（2832）：小程序事件绑定2
前端学习（2831）：小程序事件绑定
微信小程序手机号绑定功能（登录后绑定）
1.手机号绑定并不是手机号登录所以他其实就是一个添加主要是他有一个短信发送接收验证码验证的过程首先是小程序端 HTML 给你一个按钮绑定点击 bindtap 事件跳转至手机号绑定页面 < ...
微信小程序开发系列 (四) ：微信小程序的页面跳转路由设计
笔者由于工作需要,曾经参加过一个微信小程序同 SAP 系统集成的项目,因此从零开始学习了微信小程序的开发知识.这里通过系列文章把自己所学分享出来,希望对相关学习者有所帮助. 本教程前面三篇文章: 微信 ...
Android微信小程序原理,微信小程序事件流原理解析
这篇文章主要介绍了微信小程序事件流原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下一.什么是事件? 事件是视图层到逻辑层的通讯方式: 事件可 ...

小程序事件绑定传值和路由

自定义事件

小程序事件绑定传值和路由相关推荐

最新文章

热门文章

小程序事件绑定 传值和路由

自定义事件

小程序事件绑定 传值和路由相关推荐

最新文章

热门文章

小程序事件绑定传值和路由

小程序事件绑定传值和路由相关推荐