Vue.js 列表展示 - 使用 Vue.js 实现动态列表展示

<template>
  <view class="common-layout">
    <view class="el-header">
      <Header></Header>
    </view>
    <view class="el-main">
      <scroll-view class="infinite-list-wrapper" scroll-y="true" style="height: 577px;">
        <view v-for="i in count" :key="i" class="list-item">
          <view class="el-row">
            <view class="el-col" :span="24">
              <navigator url="/home/post">
                <view class="grid-content ep-bg-purple">
                  <view class="post">
                    <view class="post-title">
                      150小时教你熟练使用vue.js
                    </view>
                    <view class="post-content"></view>
                  </view>
                  <view class="userinfo">
                    <image src="https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png" mode="widthFix" class="avatar" />
                    <view>用户{{ i }}</view>
                  </view>
                  <view class="actions">
                    <view class="transpond"></view>
                    <view class="comment"></view>
                    <view class="like"></view>
                  </view>
                </view>
              </navigator>
            </view>
          </view>
          <view class="el-divider"></view>
        </view>
      </scroll-view>
      <view class="loading" wx:if="loading">
        <view class="loading-text">加载中...</view>
      </view>
      <view class="no-more" wx:if="noMore">
        <view class="no-more-text">已经没有啦！</view>
      </view>
      <view class="affix">
        <button type="primary" class="edit-button" open-type="getUserProfile" bindgetuserinfo="onGetUserInfo">
          <image src="edit-icon.png" mode="aspectFit" class="icon" />
        </button>
      </view>
    </view>
    <view class="el-footer">
      <Footer></Footer>
    </view>
  </view>
</template>
<script>
import Header from '../components/header.vue'
import Footer from '../components/footer.vue'
import { computed, ref } from 'vue'
// 替换成您的图标库的引用
import { Edit } from 'your-icon-library'

export default {
  components: {
    Header,
    Footer
  },
  setup() {
    const count = ref(20)
    const loading = ref(false)
    const noMore = computed(() => count.value >= 10000)
    const disabled = computed(() => loading.value || noMore.value)
    const load = () => {
      loading.value = true
      setTimeout(() => {
        count.value += 9
        loading.value = false
      }, 2000)
    }

    const onGetUserInfo = (e) => {
      console.log(e.detail.userInfo)
      // 获取用户信息后的逻辑处理
    }

    return {
      count,
      loading,
      noMore,
      disabled,
      load,
      onGetUserInfo
    }
  }
}
</script>
<style>
/* 页头容器 */
.el-header {
  height: 40px;
}

/* 内容容器 */
.el-main {
  width: 100%;
  height: 577px;
}

.el-footer {
  height: 50px;
}

.grid-content {
  margin: 8px;
  min-height: 60px;
  background-color: #f1f1f1;
  border-radius: 4px;
  color: #000;
}

.el-divider {
  margin: 0;
}

.infinite-list-wrapper {
  height: 577px;
  text-align: center;
}

.list-item {
  margin: 0;
  padding: 0;
  list-style: none;
}

.affix {
  position: fixed;
  bottom: 80px;
  right: 20px;
  z-index: 1;
}

.post {
  float: left;
  width: 75%;
}

.post-title {
  float: left;
  margin: 2.5px;
  width: 100%;
  text-align: left;
}

.post-content {
  float: left;
  margin-top: 5px;
  width: 100%;
  min-height: 25px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #fff;
}

.userinfo {
  float: right;
  margin: 7.5px 0;
  width: 20%;
}

.actions {
  display: flex;
  justify-content: space-between;
}

.loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
}

.loading-text {
  color: #808080;
}

.no-more {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
}

.no-more-text {
  color: #808080;
}

.affix .edit-button {
  background-color: #409eff;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  outline: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 2px rgba(0, 0, 0, 0.08);
  color: #fff;
}

.affix .edit-button .icon {
  width: 24px;
  height: 24px;
}
</styl