uniapp 仿微信聊天下拉刷新

Uniapp 是一个基于 Vue.js 的跨平台框架，可以用它来开发 Web、iOS、Android 等多个平台的应用。而仿微信聊天下拉刷新则是一种常见的 UI 效果，当用户下拉聊天记录时，页面会出现下拉刷新的效果，以展示最新的聊天记录。

在 Uniapp 中实现仿微信聊天下拉刷新，可以通过使用下拉刷新组件来完成。首先，在需要实现下拉刷新的页面中引入 uni-app 组件库，然后在该页面的 template 中添加下拉刷新组件，示例代码如下：

<template>
  <view>
    <scroll-view scroll-y="true" class="chat-scrollview" :style="{height:chatScrollHeight}">
      <!-- 聊天记录列表 -->
      <view class="chat-list">
        ...
      </view>
    </scroll-view>
    <!-- 下拉刷新组件 -->
    <uni-scroll-view refresher-enabled :refresher-threshold="80" @refresherrefresh="onRefresh">
      <view slot="refresher" class="uni-refresher">
        <i class="uni-icons" :class="{'uni-loading':isRefreshing}"></i>
        <span v-if="isRefreshing">正在刷新...</span>
        <span v-else>下拉刷新</span>
      </view>
    </uni-scroll-view>
  </view>
</template>

<script>
  import uniScrollView from '@/components/uni-scroll-view/uni-scroll-view.vue'

  export default {
    components: {
      uniScrollView
    },
    data() {
      return {
        chatScrollHeight: '100vh',
        isRefreshing: false
      }
    },
    methods: {
      onRefresh() {
        // 下拉刷新回调函数
        this.isRefreshing = true;
        setTimeout(() => {
          this.isRefreshing = false;
        }, 2000);
      }
    }
  }
</script>

<style lang="scss">
  .chat-scrollview {
    height: calc(100vh - 100rpx);
  }
  .uni-refresher {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80rpx;
    color: #999;
    font-size: 28rpx;
    line-height: 1;
  }
</style>

在这段代码中，我们使用了 uni-app 自带的 `uni-scroll-view` 组件作为下拉刷新组件，并设置了 `refresher-enabled` 属性为 true，表示开启下拉刷新功能。同时，我们在组件中设置了 `refresher-threshold` 属性为 80，表示下拉超过 80rpx 才会触发下拉刷新的回调函数 `onRefresh`。当用户下拉到阈值时，会触发 `@refresherrefresh` 事件，我们在这个事件中执行下拉刷新的逻辑。在代码中，我们设置了一个 `isRefreshing` 变量来控制刷新状态，当 `isRefreshing` 为 true 时，显示“正在刷新...”文本和 loading 图标，当 `isRefreshing` 为 false 时，显示“下拉刷新”文本。