图标区域页面布局

最新推荐文章于 2023-10-23 23:19:29 发布

哒玲

最新推荐文章于 2023-10-23 23:19:29 发布

阅读量1k

点赞数 2

分类专栏：旅游页面移动版笔记文章标签：图标区域布局轮播分页算法

本文链接：https://blog.csdn.net/zl13015214442/article/details/87976849

版权

旅游页面移动版笔记专栏收录该内容

20 篇文章

订阅专栏

本文详细介绍了如何创建图标区域页面布局，包括设置元素icon的样式以实现高度自适应，展示多个小图标，实现图标区域的逻辑，如左右循环拖动的轮播效果。同时，通过定义数据并使用分页插件，动态生成页码，实现分页功能。针对文字过长的情况，应用CSS样式实现文字省略。最后，文章提到了将代码提交到线上仓库的步骤。

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

1. 创建新分支
码云上创建功能分支：index-icons，把该分支拉到本地，然后切换到该分支：
在这里插入图片描述在components下创建Icons.vue，取名HomeIcons，
在Home组件中引入并注册Icons组件：

设置元素icon的样式，高度自适应为父元素宽度的一半：

2. 显示八个小图标
– 先观察其中的一个小图标icon的位置和样式：
在这里插入图片描述
– 首先我们要了解在CSS中，margin和padding的百分比数值总是相对于父元素的宽度来计算的。利用这个特性，只要将padding-top或者padding-bottom设置为与width相同的百分比，再将height设为0，最后通过定位实现自适应的正方形盒子：
在这里插入图片描述 – 复制八个相同的icon的效果：

– 最后实现图标的内容，每一个小方格里有一张图标和说明文字，先实现第一个：

– 相应的样式代码：

.icon
  position: relative
  overflow: hidden
  float: left
  width: 25%
  height: 0
  padding-bottom: 25%
  .icon-img
    position: absolute
    top: 0
    left: 0
    right: 0
    bottom: .44rem  /*给p标签留出来的位置*/
    box-sizing: border-box
    padding: .1rem
    .icon-img-content
      display: block
      margin: 0 auto  /*图片实现自动居中*/
      height: 100%
  .icon-desc
    position: absolute
    right: 0
    left: 0
    bottom: 0
    height: .44rem
    line-height: .44rem
    color: $darkTextColor
    text-align: center

– 最后复制八个图标的效果：
在这里插入图片描述
3. 图标区域逻辑实现

想要实现当有多于八个图标的时候可以左右循环拖动，将Swiper.vue组件中的代码（黄色部分）拷贝粘贴到icons标签中，包裹icon元素：
bug
在图标下侧难以拖动，原因是Swiper-container的高度和图片一样高，没有将icons的高度完全包裹在内；:

解决：
将icons之后的样式往前移一级，和icons平级。并改写icons的样式内容：

这样在icons范围内左右滑动都会引起轮播图的效果。
此时显示的数据实际上是我们写死的，而在实际中应该是由后端传递过来的。下面定义一组数据：

遍历数组，显示内容：
实现分页
– 现在我们的第九个图标在轮播图中显示不出来，通过computed属性实现分页：

computed: {
      pages(){
        // 最终分页结果
        const pages=[]
        // 遍历icon列表
        this.iconList.forEach((item,index) => {
          // 每8条为一页；例：0-7为第一页
          // page为当前页码；
          const page =Math.floor(index/8)
          // 判断pages中当前页的存储数组是否已声明，未声明则声明当前页为数组格式；
          if(!pages[page]){
            pages[page]=[]
          }
          // 将当前icon信息放入对应的页码数组中；
          pages[page].push(item)
        })
        // 返回分页之后的icon集合；
        return pages
      }
    }

在这里下载插件vue devtools调试工具，能帮助我们直观地理解，打开Chrome：
在这里插入图片描述

控制台有Vue这一选项：

我们就可以看到各组件的结构，以及分页效果：

– 接下来循环有多少个轮播页面：

同时遍历的元素也由item of iconList变为item of page。最后会实现根据数据项的不同，自动化的构建页码，可以实现多页切换的效果。

4. 优化
当icon-desc文字较长时，由于盒子宽度限制显示不完全，我们要借助一个css样式完成文字的省略。text-overflow:ellipsis;–当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。要实现溢出时产生省略号的效果还须定义：强制文本在一行内显示white-space:nowrap及溢出内容为隐藏overflow:hidden;，只有这样才能实现溢出文本显示省略号的效果。
在这里插入图片描述
方便全局修改，将这三个属性封装在styles下面的一个mixins.styl的文件里：

首先引入该文件：

然后直接使用别名：

5. 提交到线上
git add .
git commit -m add_icons 放到暂存区
git push 本地的代码就同步到线上了
git checkout master master上放的是整个工程的最新代码
git merge origin/index-icons 合并master和index-icons分支
git push