小程序中的几个事件名称：加载、监听触底、下拉刷新：

小程序中常用的几个事件名称有：

1. `onLoad` 事件：在页面载入时触发，一般用于页面初始化操作。

2. `onReachBottom` 事件：在页面滚动到底部时触发，一般用于实现分页加载等功能。

3. `onPullDownRefresh` 事件：在用户下拉页面时触发，一般用于实现下拉刷新等功能。

例如，在页面中可以这样定义这些事件的处理函数：

Page({
  onLoad: function(options) {
    // 页面加载时触发的处理函数
  },
  onReachBottom: function() {
    // 页面触底时触发的处理函数
  },
  onPullDownRefresh: function() {
    // 下拉刷新时触发的处理函数
  }
})

需要注意的是，`onReachBottom` 和 `onPullDownRefresh` 事件需要在页面的 `json` 配置文件中开启相应的选项才能生效。例如：

{
  "usingComponents": {},
  "enablePullDownRefresh": true,
  "backgroundTextStyle": "dark",
  "navigationBarBackgroundColor": "#fff",
  "navigationBarTitleText": "页面标题",
  "navigationBarTextStyle": "black"
}

相关问题

微信小程序 下拉加载监听事件

微信小程序中，可以使用onReachBottom来监听下拉加载事件。当页面滚动到底部时触发该事件，可以在该事件中进行相应的数据加载操作。

例如，在页面的Page对象中添加以下代码：

Page({
  // 其他页面代码...

  // 下拉加载监听事件
  onReachBottom() {
    // 在此处进行数据加载操作
    console.log('触发下拉加载事件');
    // 调用接口加载更多数据等操作
  }
})

当页面滚动到底部时，就会触发onReachBottom事件，你可以在方法中进行相关的数据加载操作。在上述例子中，触发事件后会打印出"触发下拉加载事件"，你可以在该事件中调用接口，加载更多数据等操作。

给我写个小程序上拉加载，下拉刷新的代码

好的，以下是一个简单的上拉加载、下拉刷新的小程序代码：

<!-- HTML结构 -->
<template>
  <div class="wrapper">
    <div class="pull-down-wrapper">
      <div class="pull-down-content">{{pullDownText}}</div>
    </div>
    <div class="list-wrapper">
      <ul>
        <li v-for="(item, index) in list" :key="index">{{item}}</li>
      </ul>
      <!-- 上拉加载 -->
      <div class="pull-up-wrapper">
        <div class="loading" v-if="isLoading">加载中...</div>
        <div class="no-more" v-else-if="isNoMore">没有更多了</div>
        <div class="pull-up-content" v-else>{{pullUpText}}</div>
      </div>
    </div>
  </div>
</template>

<!-- JS代码 -->
<script>
export default {
  data() {
    return {
      pullDownText: '下拉刷新',
      pullUpText: '上拉加载更多',
      list: [],
      isLoading: false,
      isNoMore: false,
      pullDown: {
        startY: 0,
        endY: 0,
        distance: 0,
        threshold: 50
      },
      pullUp: {
        startY: 0,
        endY: 0,
        distance: 0,
        threshold: 50
      }
    }
  },
  mounted() {
    // 初始化数据
    this.getList()
    // 监听下拉刷新
    this.$refs.listWrapper.addEventListener('touchstart', this.handlePullDownStart)
    this.$refs.listWrapper.addEventListener('touchmove', this.handlePullDownMove)
    this.$refs.listWrapper.addEventListener('touchend', this.handlePullDownEnd)
    // 监听上拉加载
    window.addEventListener('scroll', this.handlePullUp)
  },
  beforeDestroy() {
    // 移除监听
    this.$refs.listWrapper.removeEventListener('touchstart', this.handlePullDownStart)
    this.$refs.listWrapper.removeEventListener('touchmove', this.handlePullDownMove)
    this.$refs.listWrapper.removeEventListener('touchend', this.handlePullDownEnd)
    window.removeEventListener('scroll', this.handlePullUp)
  },
  methods: {
    async getList() {
      // 发送请求获取数据
      this.isLoading = true
      const res = await axios.get('/api/list')
      this.isLoading = false
      // 更新数据
      this.list.push(...res.data)
      // 判断是否还有更多数据
      if (res.data.length < 10) {
        this.isNoMore = true
      }
    },
    async handlePullDownStart(e) {
      // 记录开始位置
      this.pullDown.startY = e.touches[0].clientY
    },
    async handlePullDownMove(e) {
      // 计算移动距离
      this.pullDown.distance = e.touches[0].clientY - this.pullDown.startY
      // 如果是向下滑动并且在页面最顶部
      if (this.pullDown.distance > 0 && window.pageYOffset === 0) {
        // 阻止默认事件
        e.preventDefault()
        // 更新下拉刷新状态
        this.pullDownContent = this.pullDown.distance >= this.pullDown.threshold ? '松开刷新' : '下拉刷新'
      }
    },
    async handlePullDownEnd() {
      // 如果下拉距离超过了阈值
      if (this.pullDown.distance >= this.pullDown.threshold) {
        // 更新下拉刷新状态
        this.pullDownContent = '加载中...'
        // 发送请求获取数据
        const res = await axios.get('/api/list')
        // 更新数据
        this.list = res.data
      }
      // 重置下拉刷新状态
      this.pullDown.distance = 0
      this.pullDownContent = '下拉刷新'
    },
    async handlePullUp() {
      // 如果滚动到了底部
      if (window.innerHeight + window.pageYOffset >= document.body.scrollHeight - 50) {
        // 如果正在加载或者没有更多数据，直接返回
        if (this.isLoading || this.isNoMore) {
          return
        }
        // 更新上拉加载状态
        this.pullUpText = '加载中...'
        // 发送请求获取数据
        const res = await axios.get('/api/list')
        // 更新数据
        this.list.push(...res.data)
        // 判断是否还有更多数据
        if (res.data.length < 10) {
          this.isNoMore = true
        }
        // 重置上拉加载状态
        this.pullUpText = '上拉加载更多'
      }
    }
  }
}
</script>

<!-- 样式 -->
<style scoped>
.wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.pull-down-wrapper {
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  color: #999;
  transform: translate3d(0, -50px, 0);
  transition: transform 0.3s ease-out;
}

.pull-down-wrapper.active {
  transform: translate3d(0, 0, 0);
}

.list-wrapper {
  flex: 1;
}

.pull-up-wrapper {
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  color: #999;
  margin-top: 20px;
}
</style>

需要注意的是，该代码是基于Vue框架实现的，如果您使用的是其他框架或不使用框架，需要做相应的调整。