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

<template>
  <view>
    <scroll-view scroll-y="true" @scrolltolower="lower" lower-threshold="500" :style="{ height: scrollH + 'rpx' }">
      <view class="mess-box" v-if="info.length > 0">
        <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>
        <u-loadmore status="nomore" :load-text="{ nomore: '没有更多了' }" style="height: 80rpx; line-height: 80rpx" />
      </view>
      <view class="mess-empty-box" v-else>
        <view class="flex2c">
          <u-image src="/123.png" :lazy-load="true"
            style="width: 350rpx; height: 310rpx;margin-bottom:50rpx" />
          <text style="color:#989999">暂无消息</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      refresh: false,
      info: [],
    }
  },
  computed: {
    scrollH: function () {
      let sys = uni.getSystemInfoSync();
      let winWidth = sys.windowWidth;
      let winrate = 750 / winWidth;
      let winHeight = parseInt(sys.windowHeight * winrate);
      return winHeight;
    },
  },
  onLoad() {
    this.lower();
  },
  methods: {
    
    // 下拉刷新
    lower() {
      if (this.info.length > 20) {
        this.$u.toast('数据已加载完')
        return;
      }
      // 生成数量
      const count = 10;
      let arr = [];
      for(let i = 0; i < count; i++) {
        console.log("生成数据中...")
        let obj = {
          title: decodeURI(this.createRandomChinese(4)),
          date: new Date().getTime(),
          desc: decodeURI(this.createRandomChinese(80)),
          status: 1,
        }
        arr.push(obj);
      }
      this.info = [...this.info,...arr]
      // uni.showToast({
      //   title: "触发了触底事件",
      //   duration: 1500,
      //   icon: "none"
      // })
    },
    // 生成随机汉字
    createRandomChinese(count) {
      const start = parseInt('4e00', 16)
      const end = parseInt('9fa5', 16)
      let name = ''
      for (let i = 0; i < count; i++) {
        const cha = Math.floor(Math.random() * (end - start))
        name += '\\u' + (start + cha).toString(16)
      }      
      return eval(`'${name}'`)
    },
  }
}
</script>

<style lang="scss" scoped>

.mess-box {
  padding: 16rpx;
  background-color: #f2f2f2;

  .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;
  }
}

.mess-empty-box {}
</style>