createSelectorQuery 查询节点信息

createSelectorQuery 小程序的方法，用于查询节点等操作

1
2
3
4
5
6
7
const query = wx.createSelectorQuery();
query.select("#the-id").boundingClientRect(); // 节点的布局信息
query.selectViewport().scrollOffset();
query.exec(function (res) {
  res[0].top; // #the-id节点的上边界坐标
  res[1].scrollTop; // 显示区域的竖直滚动位置
});

组件内的方法

Component(Object object)

组件生命周期

lifetimes

1
2
3
4
5
6
// 生命周期
lifetimes: {
    ready() { // 在组件在视图层布局完成后执行
   	 ...
    }
},
组件所在页面的生命周期
1
2
3
4
5
6
7
8
9
10
11
12
13
Component({
  pageLifetimes: {
    show: function () {
      // 页面被展示
    },
    hide: function () {
      // 页面被隐藏
    },
    resize: function (size) {
      // 页面尺寸变化
    },
  },
});

组件对数据的监听

observers

1
2
3
4
5
observers: { // 对数据的监听(数据初次加载完成也会执行)
    监听的数据对象(newData){
      console.log(newData)
    }
},

子组件自定义事件传递给父组件

1
2
3
4
5
6
7
8
9
10
11
12
子组件js：
// 触发自定义事件 向父组件传值， 参数x（可选，传递给父组件的参数，可以是对象或其他）
this.triggerEvent('自定义事件名', 参数x)


父组件wxml：
<子组件标签 bind:自定义事件名="执行的事件" />

父组件js：
执行的事件(event) {
	console.log(event.detil.参数)
}

父组件自定义事件传递给子组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
父组件wxml：
<子组件标签 class="子组件类名">

父组件JS：
// 选择组件，并传入事件和参数
this.selectComponent('.子组件类名').自定义事件名(传入参数)

子组件js：
methods: {
	自定义事件名(参数x){
		console.log(参数x)
	}
}

兄弟组件间传递事件和传值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
例子：子组件1向子组件2传递参数

父组件wxml中：
<子组件标签1 bind:自定义事件名1="执行的事件">
<子组件标签2 class="子组件2类名">

父组件js：
执行的事件(event) {
	this.selectComponent('.子组件2类名').自定义事件名2(event.detil.参数x) // 向子组件2传值
}

子组件1js：
// 触发自定义事件 向父组件传值， 参数x（可选，传递给父组件的参数，可以是对象或其他）
this.triggerEvent('自定义事件名1', 参数x)



子组件2js：
methods: {
	自定义事件名2(参数x){
		console.log(参数x)  // 接收父组件传入的值
	}
}