vue 一个简单的项目 之一 首页 step5

最新推荐文章于 2024-07-14 21:13:16 发布
最新推荐文章于 2024-07-14 21:13:16 发布
阅读量292 收藏 1
点赞数 2
分类专栏： vue 项目案例
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/purple_lumpy/article/details/84430156
版权

上一篇，我们写了一个静态的图标区域，这里，我们实现图标区域逻辑部分，有许多图标时分页 轮播显示。

我们使用，轮播图插件。

首先，使用swiper 进行包裹。在Icons.vue 中。

<template>
  <div class="icons">
    <swiper :options="swiperOption">
      <swiper-slide>
        <div class="icon">
          <div class="icon-img">
            <img class="icon-img-content" src="http://img1.qunarzz.com/piao/fusion/1803/20/831d62d2e1c7be02.png">
          </div>
          <p class="icon-desc">红门</p>
        </div>
      </swiper-slide>
      <swiper-slide>
        <div class="icon">
          <div class="icon-img">
            <img class="icon-img-content" src="http://img1.qunarzz.com/piao/fusion/1803/20/831d62d2e1c7be02.png">
          </div>
          <p class="icon-desc">红门</p>
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>

注意，会有这样一个问题，在滑动区域上半部分是可以滑动的，但是下半部分（没有元素），不能滑动。这是因为swiper-container，只包含到上半部分，如下图。这时候调整一下css, 使得swiper-container 高度等于父元素的高度即可。

旧的css:

<style lang="stylus" scoped>
@import '~styles/variables.styl'
  .icons
    overflow: hidden
    width: 100%
    height: 0
    padding-bottom: 50%
    .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
        box-sizing: border-box
        padding: .1rem
        .icon-img-content
          height: 100%
          display: block
          margin: 0 auto
      .icon-desc
        position: absolute
        left: 0
        right: 0
        bottom: 0
        height: .44rem
        line-height: .44rem
        color: $darkTextColor
        text-align: center
</style>

新的css 

<style lang="stylus" scoped>
@import '~styles/variables.styl'
  .icons >>> .swiper-container
    width: 100%
    height: 0
    padding-bottom: 50%
  .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
      box-sizing: border-box
      padding: .1rem
      .icon-img-content
        height: 100%
        display: block
        margin: 0 auto
    .icon-desc
      position: absolute
      left: 0
      right: 0
      bottom: 0
      height: .44rem
      line-height: .44rem
      color: $darkTextColor
      text-align: center
</style>

这样子修改，就可以了。

下面，就是要把原本写死了的img src 属性提取出来，使用v-for 命令循环读取。

<template>
  <div class="icons">
    <swiper :options="swiperOption">
      <swiper-slide>
        <div
          class="icon"
          v-for="item of iconList"
          :key="item.id"
        >
          <div class="icon-img">
            <img class="icon-img-content" :src='item.imgUrl'>
          </div>
          <p class="icon-desc">{{item.desc}}</p>
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
export default {
  name: 'HomeIcons',
  data: function () {
    return {
      iconList: [{
        id: '0001',
        imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/20/831d62d2e1c7be02.png',
        desc: '红门1'
      }, {
        id: '0002',
        imgUrl: 'https://images3.c-ctrip.com/dj/201506/cxlogo.png',
        desc: '橙色2'
      }, {
        id: '0003',
        imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/20/831d62d2e1c7be02.png',
        desc: '红门3'
      }, {
        id: '0004',
        imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/20/831d62d2e1c7be02.png',
        desc: '红门4'
      }, {
        id: '0005',
        imgUrl: 'https://images3.c-ctrip.com/dj/201506/cxlogo.png',
        desc: '橙色5'
      }, {
        id: '0006',
        imgUrl: 'https://images3.c-ctrip.com/dj/201506/cxlogo.png',
        desc: '橙色6'
      }, {
        id: '0007',
        imgUrl: 'https://images3.c-ctrip.com/dj/201506/cxlogo.png',
        desc: '橙色7'
      }, {
        id: '0008',
        imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/20/831d62d2e1c7be02.png',
        desc: '红门8'
      }, {
        id: '0009',
        imgUrl: 'https://images3.c-ctrip.com/dj/201506/cxlogo.png',
        desc: '橙色9'
      }],
      swiperOption: {
        pagination: '.swiper-pagination',
        loop: true
      }
    }
  }
}
</script>

在页面上看，似乎有一个问题，第9个图标被挤到下面去了，不是显示在滑动区域。如下图。

解决上面的问题，我们需要使用计算属性。

    

<script>
export default {
  name: 'HomeIcons',
  data: function () {
    return {
      iconList: [{
        id: '0001',
        imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/20/831d62d2e1c7be02.png',
        desc: '红门1'
      }, {
        id: '0002',
        imgUrl: 'https://images3.c-ctrip.com/dj/201506/cxlogo.png',
        desc: '橙色2'
      }, {
        id: '0003',
        imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/20/831d62d2e1c7be02.png',
        desc: '红门3'
      }, {
        id: '0004',
        imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/20/831d62d2e1c7be02.png',
        desc: '红门4'
      }, {
        id: '0005',
        imgUrl: 'https://images3.c-ctrip.com/dj/201506/cxlogo.png',
        desc: '橙色5'
      }, {
        id: '0006',
        imgUrl: 'https://images3.c-ctrip.com/dj/201506/cxlogo.png',
        desc: '橙色6'
      }, {
        id: '0007',
        imgUrl: 'https://images3.c-ctrip.com/dj/201506/cxlogo.png',
        desc: '橙色7'
      }, {
        id: '0008',
        imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/20/831d62d2e1c7be02.png',
        desc: '红门8'
      }, {
        id: '0009',
        imgUrl: 'https://images3.c-ctrip.com/dj/201506/cxlogo.png',
        desc: '橙色9'
      }],
      swiperOption: {
        pagination: '.swiper-pagination',
        loop: true
      }
    }
  },
  computed: {
    pages () {
      const pages = []
      this.iconList.forEach((item, index) => {
        const page = Math.floor(index / 8)
        if (!pages[page]) {
          pages[page] = []
        }
        pages[page].push(item)
      })
      return pages
    }
  }
}
</script>

在chrome 中安装 vue-devtools 之后，可以查看到，下图。

    

然后，再修改一下 template 中的内容。

注意一点，当描述文字太长，想显示省略号时，可以使用css 来完成。如下，最后三行。

    .icon-desc
      position: absolute
      left: 0
      right: 0
      bottom: 0
      height: .44rem
      line-height: .44rem
      color: $darkTextColor
      text-align: center
      overflow: hidden
      white-space: nowrap
      text-overflow: ellipsis

当然，可能很多地方，需要用到这个样式，我们可以使用stylus 的 mixins

先在style 目录下，创建mixins.styl 文件，那三行放在一个方法里。

    

然后在使用时，如下。

    

<style lang="stylus" scoped>
@import '~styles/variables.styl'
@import '~styles/mixins.styl'
  .icons >>> .swiper-container
    width: 100%
    height: 0
    padding-bottom: 50%
  .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
      box-sizing: border-box
      padding: .1rem
      .icon-img-content
        height: 100%
        display: block
        margin: 0 auto
    .icon-desc
      position: absolute
      left: 0
      right: 0
      bottom: 0
      height: .44rem
      line-height: .44rem
      color: $darkTextColor
      text-align: center
      ellipsis()
</style>

然后，这部分就完成了，可以提交到分支了。

git push 之后

要合并

命令：

git checkout master (跳到master 分支)

git merge index-icons (当前分支与index-icons 分支合并)

git push

 

purple_lumpy
关注
专栏目录
Vue项目主页
HuaJian_Y的博客
09-24 373
1、 项目描述 1. 此项目为一个前后端分离的项目； 2. 采用vue+ES6+element ui等前端最新技术； 3. 项目包括商家、商品信息、用户、登录注册等多个子模块； 4. 采用模块化、组件化、工程化的开发模式； ps：本期只带来首页内容，后续更新项目请持续关注。 2、 项目需求 2.1 基本页面布局 2.2 轮播图 项目文件 vue-cli的项目文件目录 目录/...
vue首页页面
qq_45179361的博客
02-11 1461
vue首页页面
如何在vue项目中设置首页
热门推荐
bingyue0126的博客
04-09 2万+
如何在vue项目中设置首页 1、首先创建一个vue为后缀名的文件，最好在新建的文件夹下面创建，如下图所示： 说明：一般我们的主要页面代码都是写在vue 项目中的这个src文件夹下，项目中所会引用到的组件放在src文件夹下的components文件夹里面。 2、找到router文件夹，在router文件夹下的index.js文件中设置主页面路由 注意：页面路径一定不能错，否则浏览器无法渲染，要设置的主页面路径等内容在routes下设置为第一位。 ...
vue3 快速入门 (二) : 实现第一个Vue网页，并在手机上浏览
最新发布
朱豪凯的博客
07-14 1646
介绍如何实现一个最简单的Vue网页，并在手机浏览器上浏览
vue基础教程（7）——构建项目级首页
关注前端，关注原创
04-25 2220
前面我们学习了vue的路由和登录页搭建，本文将和大家共同学习首页的搭建。首页示例如图：很多项目经验比较少的同学，一般都是对某些语法很熟悉，但是对整个项目是如何从零开始搭建的，页面布局是如何通过代码实现的，可能并未过多关注。也许有人会说，这些ui框架或者开源项目，都会开箱即用，可如果框架提供的布局无法满足要求呢，如果开源项目存在bug呢，如果企业做大做强需要UI重新设计web端呢？我们有太多的理由去了解这些基础知识，我们可以永远不做，但是不能不会！
简单的vue项目
weixin_45330738的博客
10-20 1535
HellowWorld.vue组件 <template> <div class="hello"> <el-menu :default-active="'2-1'" class="el-menu-demo" > <el-col> <el-menu-item index="1">处理中心</el-menu-item> <el-submenu index='2'> <template slot="ti..
vue-stepbystep:一步一步的vue教程
04-29
Vue 可以直接把它当做一个js库使用，所以它可以很容易的接入到你的项目或者单个页面中。甚至你可以只使用它的双向绑定功能。所以它很容易上手。 比如：我们有一个需求，一个网页上一个Div标签，我们有一个json对象...
大屏可视化项目之vue3-seamless-scroll无缝滚动组件（一）——基本使用_vue seamless scroll官网
2401_84411822的博客
04-27 2565
,setup() {title: “Vue3.0 无缝滚动组件展示数据第1条”,},title: “Vue3.0 无缝滚动组件展示数据第2条”,},title: “Vue3.0 无缝滚动组件展示数据第3条”,},title: “Vue3.0 无缝滚动组件展示数据第4条”,},title: “Vue3.0 无缝滚动组件展示数据第5条”,},title: “Vue3.0 无缝滚动组件展示数据第6条”,},
vue21:关于21step vue.js的研究
03-29
3. **组件系统**：Vue的核心特性之一是组件化，它允许开发者将UI拆分成可重用的部件。每个组件都有自己的视图和数据逻辑，通过`<template>`定义模板，`<script>`处理逻辑，`<style>`管理样式。 4. **数据绑定**：...
记录一次（前后端分离）部署vue + springCloud 项目的经验和遇到的坑
qq_37578465的博客
09-11 2339
公司给了我四台服务器，需要搭建的有前端，后端，以及两台数据库做主从复制。 一、搭建主从数据库： 准备mysql-5.7.27-linux-glibc2.12-x86_64.tar包，官网下载地址mysql安装包下载地址，选择社区版下载 下载之后上传至两台数据库xxxx.xx.xx.55，xxxx.xx.xx.56 ，我习惯将其解压至 /usr/local/mysql/ 进入到该目录下 ，解压命令：...
vue项目实战(移动端)
m0_65769258的博客
04-16 6533
相关资料# vue-cli脚手架:vue2脚手架 vue3脚手架:vite vue官网: [介绍 — Vue.js vscode插件 vetur 必备工具 vue-helper 一些辅助功能 Vue VSCode Snippets 片段 (一) 创建项目# 01 安装vue-cli脚手架# npm install -g @vue/cli 02 查看vue脚手架版本# 出现版本号表示成功 vue --version 03 创建一个新项目# 创建项目 vue ..
vue设置默认首页的操作
11-19
在router.js设置如下： index就是默认页面 const routes = [ // 公司项目 { path: '/', redirect: '/index' }, {path:'/index',component:index}, { path:'/example', component:example, redirect:'/edetail', children:[ {path:'/edetail',component:edetail} ] }, {path:'/login',component:login} ] 不使用在根目录设置router的方法，跳转页面带不同的头部信息时容
vue项目首页
m0_61845534的博客
09-24 1103
项目首页概述:总体布局主要结合了vue和element-ui组件库来实现的element-ui https://element.eleme.cn/#/zh-CN ​组件使用具体请看element-ui官方网址 1.项目头部的布局左半部分是由一个logo图片,右半部分是两个按钮后期用于登录和注册功能,头 部下面有一个首页和菜谱大全,这两个组件主要功能是后期可以在这两个页面之间自由切换 代码 <template> <el...
Vue创建首页
qq_52335038的博客
10-04 1万+
一、创建后台页面 1.在前台components里创建loyout.vue组件，作为后台管理页面
VUE的首页（导航实现模板）
tonysong111073的专栏
12-09 3376
vue页面静态路由实现
【vue实战项目】通用管理系统：首页
Joker_ZJN的博客
11-19 1511
vue实战小项目系列，一个前端项目从0到1的保姆级教学。很适合后端或者才入门的同学看！
Vue项目实战：首页实现
林夏天的博客
03-29 3387
商场首页 项目 1. Nav-Header组件 组件复用的一个技巧 通过 @mixin 简化代码 统一修改系统主题色 数据请求 2. 首页轮播功能实现 使用 vue-awesome-swiper 实现轮播图 首页轮播菜单实现 Modal 弹窗动画 与 父子组件通信 懒加载 一. Nav-Header组件 （1）组件复用的一个技巧： 因为商场网站中多个页面共用了头部组件nav-header和...
通用vue组件化首页
qq_55928824的博客
01-07 2434
通用vue组件化首页
Vue3+Vant开发：首页功能实现
程序员老茶的博客
04-23 1567
Vue3+Vant开发：首页功能实现
vue 搭建一个项目
09-11
要使用Vue搭建一个项目，你可以按照以下步骤进行操作： 1. 首先，确保你已经安装了Node.js和npm（Node.js的包管理器）。你可以在终端中运行以下命令来检查它们是否已安装： ``` node -v npm -v ``` 2. 一旦你...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值