2023-06-14 记录一下uniapp scroll-view（下拉刷新）

<template>
  <view>
    <scroll-view :scroll-top="scrollTop" scroll-y="true" class="mess-scroll-Y" @scrolltoupper="upper"
      @scrolltolower="lower" @scroll="scroll" :refresher-triggered="refresh" @refresherrefresh="onRefresh"
      refresher-enabled="true">
      <view v-for="(item, index) in info" :key="index" class="mess-item">
        <view class="mess-head">
          <view class="mess-title">{{ item.title }}</view>
          <view class="mess-data-status">
            <view class="mess-date">{{ item.date }}</view>
            <view class="mess-status"></view>
          </view>
        </view>
        <view class="mess-content">{{ item.desc }}</view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      scrollTop: 0,
      refresh: false,
      info: [
        {
          title: '取消订单',
          date: '2024-03-02 11:20:36',
          desc: '这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述',
          status: 1,
        },
        {
          title: '交易成功',
          date: '2023-12-12 01:16:45',
          desc: '这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述',
          status: 2,
        },
        {
          title: '未知错误',
          date: '2023-03-02 11:20:36',
          desc: '这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述',
          status: 404,
        },
        {
          title: '取消订单',
          date: '2024-03-02 11:20:36',
          desc: '这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述',
          status: 1,
        },
        {
          title: '交易成功',
          date: '2023-12-12 01:16:45',
          desc: '这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述',
          status: 2,
        },
        {
          title: '未知错误',
          date: '2023-03-02 11:20:36',
          desc: '这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述',
          status: 404,
        },
        {
          title: '取消订单',
          date: '2024-03-02 11:20:36',
          desc: '这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述',
          status: 1,
        },
        {
          title: '交易成功',
          date: '2023-12-12 01:16:45',
          desc: '这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述',
          status: 2,
        },
        {
          title: '未知错误',
          date: '2023-03-02 11:20:36',
          desc: '这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述',
          status: 404,
        },
        {
          title: '取消订单',
          date: '2024-03-02 11:20:36',
          desc: '这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述',
          status: 1,
        },
        {
          title: '交易成功',
          date: '2023-12-12 01:16:45',
          desc: '这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述',
          status: 2,
        },
        {
          title: '未知错误',
          date: '2023-03-02 11:20:36',
          desc: '这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述',
          status: 404,
        },
      ],
    }
  },
  methods: {
    onRefresh() {
      this.refresh = true;
      uni.showToast({
        title: "触发了下拉刷新",
        duration: 1500,
        icon: "none"
      })
      // 这里不能直接让refresh直接为false，否则可能会发生下拉加载无法复位的情况
      setTimeout(() => {
        this.refresh = false;
      }, 500)
    },
    upper: function (e) {
      uni.showToast({
        title: "触发了上拉事件",
        duration: 1500,
        icon: "none"
      })
    },
    lower: function (e) {
      uni.showToast({
        title: "触发了触底事件",
        duration: 1500,
        icon: "none"
      })
    },
    scroll: function (e) {
      console.log(e)
    },
  }
}
</script>

<style lang="scss" scoped>
.mess-scroll-Y {
  height: 100%;
  background-color: #f2f2f2;
  padding: 32rpx;

  .mess-item {
    background-color: #fff;
    border-radius: 16rpx;
    margin-bottom: 16rpx;
    padding: 32rpx;

    .mess-head {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .mess-title {
        font-size: 32rpx;
      }

      .mess-data-status {
        display: flex;
        align-items: center;

        .mess-date {
          color: #ccc;
          font-size: 24rpx;
        }

        .mess-status {
          width: 0;
          height: 0;
          border: 4rpx solid lightblue;
          border-radius: 4rpx;
          margin-left: 16rpx;
        }
      }
    }
  }

  .mess-content {
    color: #ccc;
    margin: 16rpx 0 0;
    word-break: break-all;
    font-size: 26rpx;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: normal;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
  }
}
</style>