首页初步提交

pages/index.vue

@@ -1,36 +1,233 @@
 <template>
-  <view class="content">
+  <view class="page-container">
-    <image class="logo" src="@/static/logo200.png"></image>
+
-    <view class="text-area">
+    <scroll-view
-      <text class="title">Hello Agri</text>
+        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>
-  .content {
+/* 适配小程序/H5的盒模型，避免padding导致宽度溢出 */
+page {
+  box-sizing: border-box;
+}
+.page-container {
+  background-color: #f8f8f8;
+  min-height: 100vh;
+  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-conte4nt: center;
+  padding: 30rpx;
+  color: #999;
+  font-size: 26rpx;
+  gap: 10rpx;
+}
+
+.no-more {
+  /* 核心：flex布局实现居中 */
   display: flex;
-    flex-direction: column;
   align-items: center;
   justify-content: center;
-  }
+  /* 占满滚动容器剩余高度，保证垂直居中 */
-
+  min-height: 200rpx; /* 最小高度，避免内容太少时不居中 */
-  .logo {
+  /* 文字样式保留 */
-    height: 200rpx;
+  color: #999;
-    width: 200rpx;
+  font-size: 26rpx;
-    margin-top: 200rpx;
+  /* 可选：增加上下内边距，视觉更舒适 */
-    margin-left: auto;
+  padding: 30rpx 0;
-    margin-right: auto;
-    margin-bottom: 50rpx;
-  }
-
-  .text-area {
-    display: flex;
-    justify-content: center;
-  }
-
-  .title {
-    font-size: 36rpx;
-    color: #8f8f94;
 }
 </style>