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 '@element-plus/icons-vue'

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;
}
</style>