uniapp中监听

监听页面滚动事件

在uniapp中监听页面滚动事件可以通过onPageScroll生命周期函数实现。该函数会在页面滚动时触发，返回滚动距离信息。

export default {
  onPageScroll(e) {
    console.log('滚动距离:', e.scrollTop)
  }
}

监听全局事件

使用uni.$on方法可以监听全局自定义事件，适用于跨页面通信。

// 监听事件
uni.$on('eventName', (data) => {
  console.log('收到事件:', data)
})

// 触发事件
uni.$emit('eventName', {msg: '事件数据'})

监听数据变化

对于响应式数据变化，可以使用watch属性来监听。

export default {
  data() {
    return {
      count: 0
    }
  },
  watch: {
    count(newVal, oldVal) {
      console.log('count变化:', oldVal, '->', newVal)
    }
  }
}

监听表单输入

监听表单输入变化可以使用@input事件绑定。

<template>
  <input @input="handleInput" v-model="inputValue" />
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    }
  },
  methods: {
    handleInput(e) {
      console.log('输入值:', e.detail.value)
    }
  }
}
</script>

监听网络状态变化

监听网络状态变化可以使用uni.onNetworkStatusChangeAPI。

uni.onNetworkStatusChange((res) => {
  console.log('网络状态变化:', res.isConnected, res.networkType)
})

监听设备方向变化

监听设备方向变化可以使用uni.onDeviceMotionChangeAPI。

uni.onDeviceMotionChange((res) => {
  console.log('设备方向:', res.x, res.y, res.z)
})

监听键盘高度变化

监听键盘高度变化可以使用uni.onKeyboardHeightChangeAPI。

uni.onKeyboardHeightChange((res) => {
  console.log('键盘高度:', res.height)
})