(vant)使用精灵图和grid组件实现列表

最新推荐文章于 2025-07-11 11:35:19 发布

vvvvv_2

最新推荐文章于 2025-07-11 11:35:19 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_36663526/article/details/107596704

框架及插件专栏收录该内容

9 篇文章

订阅专栏

本文介绍如何在Vue中实现网格布局，并使用精灵图优化图标加载，展示了一个包含多种功能区域的网格示例，包括爆料站、故事站等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue

<template>
  <div>
    <van-grid class="navicon mt-3" :column-num="4">
      <van-grid-item v-for="(item,index) in naviconList" :key="index">
        <i class="sprite" :class="item.activeClass"></i>
        <div class="mt-2">{{item.text}}</div>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script>
export default {
  data() {
    return {
      naviconList: [
        {
          activeClass:'sprite-news',
          text:'爆料站'
        },
        {
          activeClass:'sprite-stories',
          text:'故事站'
        },
        {
          activeClass:'sprite-mall',
          text:'周边商城'
        },
        {
          activeClass:'sprite-server',
          text:'体验服'
        },
        {
          activeClass:'sprite-rookie',
          text:'新人专区'
        },
        {
          activeClass:'sprite-honour',
          text:'荣耀·传承'
        },
        {
          activeClass:'sprite-wz',
          text:'王者营地'
        },
        {
          activeClass:'sprite-public',
          text:'公众号'
        },
      ]
    }
  },

}

</script>

<style>
</style>

scss

.sprite {
  background: url(../images/index.png) no-repeat 0 0; //0 0左上角对齐 750*910
  background-size:28.8462rem 35rem ; //375px
  display: inline-block; //i标签使用精灵图要设置
  &.sprite-news{
    width: 2.6154rem;
    height: 1.5385rem;
    background-position: 63.546% 15.517%; //用百分数
  }
  &.sprite-stories{
    width: 3.5385rem;
    height: 1.5385rem;
    background-position: 93.483% 15.614%; //用百分数
  }
  &.sprite-mall{
    width: 1.4615rem;
    height: 1.6923rem;
    background-position: 36.746% 0.924%; //用百分数
  }
  &.sprite-server{
    width: 1.5385rem;
    height: 1.5385rem;
    background-position: 10.408% 15.517%; //用百分数
  }
  &.sprite-rookie{
    width: 1.5385rem;
    height: 1.6154rem;
    background-position: 89.733% 1.266%; //用百分数
  }
  &.sprite-honour{
    width: 1.8462rem;
    height:1.5385rem;
    background-position: 36.467% 15.287%; //用百分数
  }
  &.sprite-wz{
    width: 1.8462rem;
    height: 1.8462rem;
    background-position: 63.3% 0.927%; //用百分数
  }
  &.sprite-public{
    width: 1.8462rem;
    height: 1.5385rem;
    background-position: 0 96.207%; //用百分数
  }

  &.sprite-arrow{
    width: 0.7692rem;
    height: 0.7692rem;
    background-position: 38.577% 52.076%; //用百分数
  }

}

效果：
在这里插入图片描述