agri-app/pages/index.vue

<template>
  <view class="page-container">

    <scroll-view
        scroll-y
        class="list-scroll"
        @scrolltolower="loadMore"
        :style="{ height: scrollHeight + 'px' }"
        lower-threshold="50"
    scroll-with-animation
    >
    <view
        v-for="(item, index) in listData"
        :key="index"
    class="list-item"
    @tap="onItemTap(item)"
    >
    <view class="item-title">{{ item.title }}</view>
    <view class="item-subtitle">{{ item.subtitle }}</view>
    <view class="item-tags">
      <text class="tag tag-city">{{ item.city }}</text>
      <text class="tag tag-level">{{ item.level }}</text>
      <text class="tag tag-status">{{ item.status }}</text>
    </view>
  </view>

  <view v-if="isLoading" class="loading-more">
    <uni-icons type="spinner-cycle" size="20" color="#999"></uni-icons>
    <text>加载中...</text>
  </view>
  <view v-else-if="noMore" class="no-more">没有更多数据了</view>
  </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      listData: [],
      page: 1,
      pageSize: 6,
      isLoading: false,
      noMore: false,
      total: 20, // 模拟总条数
      scrollHeight: 0
    }
  },
  onLoad() {
    this.getListData()
    // 计算滚动区域高度（适配不同设备，兼容rpx/px转换）
    const systemInfo = uni.getSystemInfoSync()
    // 80rpx转px：适配不同屏幕密度，避免高度计算偏差
    const topHeight = 80 * (systemInfo.windowWidth / 750)
    this.scrollHeight = systemInfo.windowHeight - topHeight
  },
  onReady() {
    // 页面渲染完成后再确认高度，避免小程序端高度计算不准
    const systemInfo = uni.getSystemInfoSync()
    const topHeight = 80 * (systemInfo.windowWidth / 750)
    this.scrollHeight = systemInfo.windowHeight - topHeight
  },
  methods: {
    // 模拟获取列表数据
    getListData(isRefresh = false) {
      if (isRefresh) {
        this.page = 1
        this.noMore = false
        this.listData = []
      }

      if (this.isLoading || this.noMore) return

      this.isLoading = true

      // 模拟接口请求
      setTimeout(() => {
        const start = (this.page - 1) * this.pageSize
        const end = this.page * this.pageSize
        const newData = []

        for (let i = start; i < end && i < this.total; i++) {
          // 新增：给每条数据加唯一id，优化v-for的key
          newData.push({
            id: `item-${i}`,
            title: `项目名称${i}`,
            subtitle: `公司名称${i}`,
            city: '广州',
            level: '省级项目',
            status: '已开工'
          })
        }

        this.listData = isRefresh ? newData : [...this.listData, ...newData]
        this.page++
        this.isLoading = false

        if (this.listData.length >= this.total) {
          this.noMore = true
        }
      }, 0)
    },
    // 加载更多（防抖：避免快速上拉重复触发）
    loadMore() {
      if (!this.isLoading && !this.noMore) {
        // 延迟触发，避免滚动到底部瞬间多次调用
        setTimeout(() => {
          this.getListData()
        }, 100)
      }
    },
    // 点击列表项
    onItemTap(item) {
      uni.showToast({
        title: `点击了：${item.title}`,
        icon: 'none'
      })
    },
    // 下拉刷新（可选）
    onPullDownRefresh() {
      this.getListData(true)
      setTimeout(() => {
        uni.stopPullDownRefresh()
      }, 1000)
    }
  }
}
</script>

<style scoped>
/* 适配小程序/H5的盒模型，避免padding导致宽度溢出 */
page {
  box-sizing: border-box;
}
.page-container {
  background-color: #f8f8f8;
  padding: 20rpx;
  box-sizing: border-box;
}

.list-scroll {
  background-color: #fff;
  border-radius: 8rpx;
  overflow: hidden;
  /* 新增：H5端避免滚动条样式不一致 */
  scrollbar-width: thin;
}
/* H5端滚动条样式优化（可选） */
.list-scroll::-webkit-scrollbar {
  width: 4rpx;
}
.list-scroll::-webkit-scrollbar-thumb {
  background-color: #e0e0e0;
  border-radius: 2rpx;
}

.list-item {
  padding: 12rpx 24rpx;
  border-bottom: 20rpx solid #f7f7f7;
  /* 新增：点击态样式，双端统一 */
  transition: background-color 0.2s;
}
.list-item:active {
  background-color: #f5f5f5;
}

.item-title {
  font-size: 28rpx;
  line-height: 52rpx;
  font-weight: bolder;
  color: #333;
}

.item-subtitle {
  font-size: 26rpx;
  color: #666;
  line-height: 52rpx;
}

.item-tags {
  display: flex;
  gap: 16rpx;
  flex-wrap: wrap; /* 新增：标签过多时换行，避免溢出 */
  margin: 14rpx 0;
}

.tag {
  font-size: 22rpx;
  padding: 4rpx 12rpx;
  border-radius: 4rpx;
  display: inline-block; /* 修复H5端padding不生效问题 */
}

.tag-city {
  background-color: #e8f4ff;
  color: #409eff;
}

.tag-level {
  background-color: #fdf4e4;
  color: #f5961d;
}

.tag-status {
  background-color: #f0f9eb;
  color: #67c23a;
}

.loading-more {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30rpx;
  color: #999;
  font-size: 26rpx;
  gap: 10rpx;
}

.no-more {
  /* 核心：flex布局实现居中 */
  display: flex;
  align-items: center;
  justify-content: center;
  /* 占满滚动容器剩余高度，保证垂直居中 */
  min-height: 200rpx; /* 最小高度，避免内容太少时不居中 */
  /* 文字样式保留 */
  color: #999;
  font-size: 26rpx;
  /* 可选：增加上下内边距，视觉更舒适 */
  padding: 30rpx 0;
}
</style>