Vue项目二：设置标题搜索栏，以及图片的轮播。

7-1穿件头目录
采用了stylus的方法编写CSS样式。
<template>
<div>
<div class="header">
<div class="header-left">返回</div>
<div class="header-input">输入城市/景点/游玩主题</div>
<div class="header-right">城市</div>
</div>
</div>
</template>
<script>
export default {
name: 'HomeHeader'
}
</script>

styles来使用：
如：@import '~styles/varibles.styl'

7-2引入阿里iconfont

添加的文件 iconfont目录中的，和iconfont.css。

iconfont.css需要添加文件所在目录@font-face {font-family: "iconfont";src: url('./iconfont/iconfont.eot?t=1535510692186'); /* IE9*/src: url('./iconfont/iconfont.eot?t=1535510692186#iefix') format('embedded-opentype'), /* IE6-IE8 */url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAToAAsAAAAAB2AAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFY8mkg/Y21hcAAAAYAAAABfAAABnLPgHAlnbHlmAAAB4AAAAQEAAAEg5x7cYWhlYWQAAALkAAAALwAAADYSd5dIaGhlYQAAAxQAAAAcAAAAJAfeA4VobXR4AAADMAAAAA4AAAAQEAAAAGxvY2EAAANAAAAACgAAAAoAuABQbWF4cAAAA0wAAAAfAAAAIAERADBuYW1lAAADbAAAAUUAAAJtPlT+fXBvc3QAAAS0AAAAMgAAAEObMMDReJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2BkYWCcwMDKwMHUyXSGgYGhH0IzvmYwYuRgYGBiYGVmwAoC0lxTGByeqTzzYm7438AQw9zM0AAUZgTJAQDluAxUeJztkLENgDAMBM9JQBFiDEqqCDFExqBi8qwRHJuCIXjrLPtluXhgAqKyKwnkRhi61BXzI4v5iVP3rBWgba202vt3MoldZJ2Cf5CZX6v1493iSM2xLItjfnWQB/zLE6oAeJw1jsFKw0AQhuffpMmmkdgm7W4CNkHERC8FS0mKSIkiePRpxKvgWWhOevERmrM9qATBq3cvXvsInla3gQ7MxwwzfPzESJdRsxX5FBAF+xMhLRsesjRDmhe5PHlkX8kR4KvnYBY5HfXU5+FAsJfjeBSoNOS+xfETzYJdaJXuvzv2a9xrHzmwBhJikk+1a1ogH4N9qksZ4o2LHlcX3MaryxPjVp1FZaSueH/IseLCwYeb2G007Xs3boySXJJ0QHQ4RjZHEUN67aBXD3aMTjqHSCA86ODfy7Vprpf1hnXVmGZTLTbEQ9cYjvh5yx192/6V249F1Zy6ez10r1v+A0PHPhkAAAB4nGNgZGBgAGLH093G8fw2Xxm4WRhA4PoazSUI+n8DCwNzM5DLwcAEEgUAI28KLgB4nGNgZGBgbvjfwBDDwgACQJKRARWwAABHCgJteJxjYWBgYEHCAACwABEAAAAAAAAAKABQAJAAAHicY2BkYGBgYVBhYGYAASYg5gJCBob/YD4DAAx/AUIAeJxlj01OwzAQhV/6B6QSqqhgh+QFYgEo/RGrblhUavdddN+mTpsqiSPHrdQDcB6OwAk4AtyAO/BIJ5s2lsffvHljTwDc4Acejt8t95E9XDI7cg0XuBeuU38QbpBfhJto41W4Rf1N2MczpsJtdGF5g9e4YvaEd2EPHXwI13CNT+E69S/hBvlbuIk7/Aq30PHqwj7mXle4jUcv9sdWL5xeqeVBxaHJIpM5v4KZXu+Sha3S6pxrW8QmU4OgX0lTnWlb3VPs10PnIhVZk6oJqzpJjMqt2erQBRvn8lGvF4kehCblWGP+tsYCjnEFhSUOjDFCGGSIyujoO1Vm9K+xQ8Jee1Y9zed0WxTU/3OFAQL0z1xTurLSeTpPgT1fG1J1dCtuy56UNJFezUkSskJe1rZUQuoBNmVXjhF6XNGJPyhnSP8ACVpuyAAAAHicY2BigAAuBuyAhZGJkZmRhZGVgT0rMzGvJL+ULS0xL6M0k604v7S4NJ+BAQBvuwhZAAA=') format('woff'),url('./iconfont/iconfont.ttf?t=1535510692186') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/url('./iconfont/iconfont.svg?t=1535510692186#iconfont') format('svg'); /* iOS 4.1- */
}.iconfont {font-family:"iconfont" !important;font-size:16px;font-style:normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}

7-3轮播图片
1.npm install vue-awesome-swiper@2.6.7 --save 插件的安装。
2.宽高比例自适应
overflow:hidden
width:100%
height: 0
padding-bottom: 31.25%
3.设置分支index-swiper上传：
git pull
git checkout index-swiper
git status
进入分支
git add .
git commit -m "change"
git push
在上传到master
git checkout master
git merge origin/index-swiper
git push

4.循环轮播，在插件的数据swiperOption中增加一个loop :true，就可以实现

轮播代码
<template>
<div class="wrapper"><swiper :options="swiperOption" ><swiper-slide v-for="item of swiperList" :key="item.id"><img class="img-swiper" :src="item.imgUrl" /></swiper-slide><!-- Optional controls --><div class="swiper-pagination"  slot="pagination"></div></swiper>
</div>
</template><script>
export default {name: 'HomeSwiper',data () {return {swiperOption: {pagination: '.swiper-pagination',loop: true},swiperList: [{id: '0001',imgUrl: 'http://img1.qunarzz.com/piao/fusion/1808/8a/1957a0fb58ad0402.jpg_750x200_e72b8c0f.jpg'},{id: '002',imgUrl: 'http://img1.qunarzz.com/piao/fusion/1804/bd/8e4a1c3f470d3702.jpg_750x200_f1f0a8c7.jpg'}]}}
}
</script><style lang="stylus" scoped>
.wrapper >>> .swiper-pagination-bullet-activebackground: #fff
.wrapperoverflow:hiddenwidth:100%height: 0padding-bottom: 26.67%background: #ccc.img-swiperwidth: 100%
</style>

Vue项目二：设置标题搜索栏，以及图片的轮播。相关推荐

vue项目中，在安卓手机上swiper轮播切换时视频与图片出现卡顿切换问题
vue项目中,在安卓手机上swiper轮播切换时视频与图片出现卡顿切换问题做项目的时候发现一个问题,swiper视频与图片轮播切换时在ios上切换很流畅,但是安卓手机就很卡顿,想办法解决了半天,百度 ...
在vue项目中设置网站图标
怎么在我们的Vue项目中设置自定义的网站图标: 首先我们需要先制作个ico图标,大小为32*32的,放到static文件夹下,附制作网站,我们把制作好的ico图片改名为:favicon.ico(注:必 ...
如何在vue项目中设置首页
如何在vue项目中设置首页 1.首先创建一个vue为后缀名的文件,最好在新建的文件夹下面创建,如下图所示: 说明:一般我们的主要页面代码都是写在vue 项目中的这个src文件夹下,项目中所会引用到的组 ...
vue项目中设置网站图标
怎么在vue项目中设置网站图标: 1,先下载个icon图标,favicon.ico,大小为32*32的,放到static文件夹下: static文件是vue项目中用来存放静态资源的文件夹,放到这里的文 ...
vue项目里面视频与图片的轮播
需求仿照天猫等实现视频与图片的轮播效果运用的控件有: 1.视频播放器:腾讯云点播超级播放器官方文档地址(一定要看) 2.轮播插件:iSlider----这是一个表现出众,轻量且高性能,无任何库依赖 ...
仿百度壁纸客户端（二）——主页自定义ViewPager广告定时轮播图
仿百度壁纸客户端(二)--主页自定义ViewPager广告定时轮播图百度壁纸系列仿百度壁纸客户端(一)--主框架搭建,自定义Tab + ViewPager + Fragment 仿百度壁纸客户端( ...
html中间大两边小轮播代码,vue使用swiper实现中间大两边小的轮播图效果
项目中使用的vue,刚好有需求要实现轮播图,突出显示当前图片,两边展示其他图片:通过查各种资料,实现了,故在此记录下来下面我们来看下实现步骤: 第一步:首先在项目index.html中引入swipe ...
三郎前端特效学习源代码：图片主页轮播组件
三郎前端特效学习源代码:图片主页轮播组件简单介绍效果图源代码 html部分 js部分 css部分简单介绍各大网站都比较常用的主页轮播组件可以自己改改就能用效果图源代码 html部分 & ...
BannerLayoutSimple 支持图片无限轮播的 BannerLayout,支持自定义小圆点位置以及显示位置等等，反正支持的挺多的，源码也有注释
BannerLayoutSimple 项目地址: 7449/BannerLayoutSimple 简介:支持图片无限轮播的 BannerLayout,支持自定义小圆点位置以及显示位置等等,反正支持的挺 ...
Android实现广告页图片无限轮播
一.概述对于一个联网的Android应用, 首页广告无限轮播基本已经成为标配了. 那么它是怎么实现的呢? 有几种实现方式呢? 二.无限轮播的实现 1.最常规的手段是用 ViewPager来实现 2. ...

Vue项目二：设置标题搜索栏，以及图片的轮播。

Vue项目二：设置标题搜索栏，以及图片的轮播。相关推荐

最新文章

热门文章