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

自定义事件

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
})