uniapp item居中布局，item展开收起效果

---

---

前言

最近在写一些界面功能，下面是一个排列的item，需要展示三行，而且item的宽度都是固定的，一行显示七个，支持展开收起效果。

---

一、先看效果

二、相关代码

<script lang="ts" setup>
const applyItems = []

const MemberIcon = 'https://res-oss.shangxie.club/h5/static/member.png'

onLoad(() => {
  for (let i = 0; i < 30; i++)
    applyItems.push({ id: i, img: '', name: '明似水' })
})
function clickShowMore() {
  isShow.value = !isShow.value
}
const showApplyItems = computed(() => {
  if (applyItems.length > 21 && !isShow.value)
    return applyItems.slice(0, 21)

  return applyItems
})
const isShow = ref(false)

// 获取随机颜色
function selectFromMessArray() {
  const arr = [{ title_color: '#3080FF', bg_color: '#D5E6FF' },
    { title_color: '#8A30FF', bg_color: '#E8D5FF' },
    { title_color: '#FFAA2A', bg_color: '#FFF3D5' },
    { title_color: '#65C736', bg_color: '#E0F4D6' }]
  return arr[Math.floor(Math.random() * arr.length)]
}
// 文字截取
const textIntercept = (name: string) => {
  return name.charAt(0)
}
</script>

<template>
  <view
    class="flex flex-col pt-32rpx pb-32rpx pl-28rpx pr-28rpx bg-#fff"
  >
    <view class="flex flex-row justify-between">
      <text class="text-28rpx font-400 c-#333 ">
        已有100人报名
      </text>
      <text class="text-28rpx font-500 c-#01BFBF">
        查看详情
      </text>
    </view>
    <view class="grid_content flex flex-wrap items-center">
      <view
        v-for="(item, index) in showApplyItems" :key="item.id"
        class="w-80rpx h-80rpx mt-20rpx mr-22rpx bg-#EBEDF0 border-rd-8rpx"
        :class="(index + 1) % 7 === 0 ? 'remove_right' : ''"
      >
        <image
          v-if="item.img"
          class="w-80rpx h-80rpx"
          :src="MemberIcon"
          mode="fit"
        />
        <view
          v-else-if="item.name"
          class="w-80rpx h-80rpx center item_bg_item"
          :style="{ backgroundColor: selectFromMessArray().bg_color }"
        >
          <text
            class="text-24rpx  "
            :style="{ color: selectFromMessArray().title_color }"
          >
            {{ textIntercept(item.name) }}**
          </text>
        </view>
      </view>
    </view>
    <text
      class=" mt-32rpx items-center justify-center text-center text-28rpx font-500 c-#01BFBF"
      @click="clickShowMore"
    >
      {{ isShow ? '收起查看更多' : '展开查看更多' }}
    </text>
  </view>
</template>

<style lang="scss" scoped>
.remove_right{
    margin-right: 0rpx;
  }
</style>

三、相关知识点

1、对于每一行的最后一个item右边间距需要重新设置为0

2、取随机颜色的时候可以根据style去动态设置颜色

---

总结

这个实现效果虽然简单，但是对于小白来说，还是要一点时间实现的，希望能帮助到您！