目录
一.项目配置
创建vue-cli2项目
使用stylus预处理器,下载cnpm install stylus --save -dev
cnpm install stylus-loader@3.0.2 --save -dev
更改项目文件中的相对路径
在build/webpack.base.conf.js中修改
在'@': resolve('src'),
后添加一条
'styles': resolve('src/assets/styles'),
配置完后 重启
1.轮播插件
在github上搜索vue-awesome-swiper并下载cnpm install vue-awesome-swiper@2.6.7 --save,
在main.js中引入
import VueAwesomeSwiper from 'vue-awesome-swiper'
import "swiper/dist/css/swiper.css"
Vue.use(VueAwesomeSwiper)
2.大图展示
下载:npm install vue-directive-image-previewer --save
// 大图
import VueDirectiveImagePreviewer from 'vue-directive-image-previewer'
import 'vue-directive-image-previewer/dist/assets/style.css'
Vue.use(VueDirectiveImagePreviewer, {
zIndex: 9999, //层级显示
previewSize: 3 //三倍图
})
3.3000毫秒延迟
下载依赖 cnpm install fastclick --save
import fastClick from 'fastclick'
fastClick.attach(document.body)
4.字体图标问题
main中
import '../src/assets/styles/iconfont.css'
@font-face {
font-family: "iconfont"; /* Project id 2787742 */
src: url('./iconfont/iconfont.woff2?t=1654309550836') format('woff2'),
url('./iconfont/iconfont.woff?t=1654309550836') format('woff'),
url('./iconfont/iconfont.ttf?t=1654309550836') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-add:before {
content: "\e664";
}
.icon-arrow-right:before {
content: "\e665";
}
.icon-camera:before {
content: "\e667";
}
.icon-fabulous:before {
content: "\e66f";
}
.icon-arrow-left-bold:before {
content: "\e685";
}
.icon-arrow-up-bold:before {
content: "\e686";
}
.icon-arrow-down-bold:before {
content: "\e687";
}
.icon-arrow-right-bold:before {
content: "\e688";
}
.icon-gouwuchekong:before {
content: "\e600";
}
.icon-fangdajing:before {
content: "\e612";
}
5.1px边框像素问题
import '../src/assets/styles/border.css'
@charset "utf-8";
.border,
.border-top,
.border-right,
.border-bottom,
.border-left,
.border-topbottom,
.border-rightleft,
.border-topleft,
.border-rightbottom,
.border-topright,
.border-bottomleft {
position: relative;
}
.border::before,
.border-top::before,
.border-right::before,
.border-bottom::before,
.border-left::before,
.border-topbottom::before,
.border-topbottom::after,
.border-rightleft::before,
.border-rightleft::after,
.border-topleft::before,
.border-topleft::after,
.border-rightbottom::before,
.border-rightbottom::after,
.border-topright::before,
.border-topright::after,
.border-bottomleft::before,
.border-bottomleft::after {
content: "\0020";
overflow: hidden;
position: absolute;
}
/* border
* 因,边框是由伪元素区域遮盖在父级
* 故,子级若有交互,需要对子级设置
* 定位 及 z轴
*/
.border::before {
box-sizing: border-box;
top: 0;
left: 0;
height: 100%;
width: 100%;
border: 1px solid #eaeaea;
transform-origin: 0 0;
}
.border-top::before,
.border-bottom::before,
.border-topbottom::before,
.border-topbottom::after,
.border-topleft::before,
.border-rightbottom::after,
.border-topright::before,
.border-bottomleft::before {
left: 0;
width: 100%;
height: 1px;
}
.border-right::before,
.border-left::before,
.border-rightleft::before,
.border-rightleft::after,
.border-topleft::after,
.border-rightbottom::before,
.border-topright::after,
.border-bottomleft::after {
top: 0;
width: 1px;
height: 100%;
}
.border-top::before,
.border-topbottom::before,
.border-topleft::before,
.border-topright::before {
border-top: 1px solid #eaeaea;
transform-origin: 0 0;
}
.border-right::before,
.border-rightbottom::before,
.border-rightleft::before,
.border-topright::after {
border-right: 1px solid #eaeaea;
transform-origin: 100% 0;
}
.border-bottom::before,
.border-topbottom::after,
.border-rightbottom::after,
.border-bottomleft::before {
border-bottom: 1px solid #eaeaea;
transform-origin: 0 100%;
}
.border-left::before,
.border-topleft::after,
.border-rightleft::after,
.border-bottomleft::after {
border-left: 1px solid #eaeaea;
transform-origin: 0 0;
}
.border-top::before,
.border-topbottom::before,
.border-topleft::before,
.border-topright::before {
top: 0;
}
.border-right::before,
.border-rightleft::after,
.border-rightbottom::before,
.border-topright::after {
right: 0;
}
.border-bottom::before,
.border-topbottom::after,
.border-rightbottom::after,
.border-bottomleft::after {
bottom: 0;
}
.border-left::before,
.border-rightleft::before,
.border-topleft::after,
.border-bottomleft::before {
left: 0;
}
@media (max--moz-device-pixel-ratio: 1.49), (-webkit-max-device-pixel-ratio: 1.49), (max-device-pixel-ratio: 1.49), (max-resolution: 143dpi), (max-resolution: 1.49dppx) {
/* 默认值,无需重置 */
}
@media (min--moz-device-pixel-ratio: 1.5) and (max--moz-device-pixel-ratio: 2.49), (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49), (min-device-pixel-ratio: 1.5) and (max-device-pixel-ratio: 2.49), (min-resolution: 144dpi) and (max-resolution: 239dpi), (min-resolution: 1.5dppx) and (max-resolution: 2.49dppx) {
.border::before {
width: 200%;
height: 200%;
transform: scale(.5);
}
.border-top::before,
.border-bottom::before,
.border-topbottom::before,
.border-topbottom::after,
.border-topleft::before,
.border-rightbottom::after,
.border-topright::before,
.border-bottomleft::before {
transform: scaleY(.5);
}
.border-right::before,
.border-left::before,
.border-rightleft::before,
.border-rightleft::after,
.border-topleft::after,
.border-rightbottom::before,
.border-topright::after,
.border-bottomleft::after {
transform: scaleX(.5);
}
}
@media (min--moz-device-pixel-ratio: 2.5), (-webkit-min-device-pixel-ratio: 2.5), (min-device-pixel-ratio: 2.5), (min-resolution: 240dpi), (min-resolution: 2.5dppx) {
.border::before {
width: 300%;
height: 300%;
transform: scale(.33333);
}
.border-top::before,
.border-bottom::before,
.border-topbottom::before,
.border-topbottom::after,
.border-topleft::before,
.border-rightbottom::after,
.border-topright::before,
.border-bottomleft::before {
transform: scaleY(.33333);
}
.border-right::before,
.border-left::before,
.border-rightleft::before,
.border-rightleft::after,
.border-topleft::after,
.border-rightbottom::before,
.border-topright::after,
.border-bottomleft::after {
transform: scaleX(.33333);
}
}
6.rem屏幕自适应
1全局中:
// 使用js实训屏幕的自适应
// import '../src/utils/rem.js'
// // html根元素的字体大小(相对值)=(设备的可是宽度/原图大小)*倍数 750像素 原图的width宽度========rem原理
// function change(){ document.documentElement.style.fontSize=(document.documentElement.clientWidth||document.body.clientWidth)*100 / 750+ 'px'
// console.log("1rem="+(document.documentElement.clientWidth||document.body.clientWidth)*100/750+"px" );
// }
// change()
// // // 窗口大小改变事件
// // window.onresize=function(){
// change()
// // }
2.app.vue中
<script>
function change(){ document.documentElement.style.fontSize=(document.documentElement.clientWidth||document.body.clientWidth)*100 / 750+ 'px'
console.log("1rem="+(document.documentElement.clientWidth||document.body.clientWidth)*100/750+"px" );
}
change()
</script>
二.首页
1.头部
将头部拆成组件,组件内容左侧icon图标,中间input框,右侧城市
使用弹性盒子实现头部布局,最右侧盒子加min-width属性,实现头部的自适应
2.轮播
将轮播拆成组件
在github上搜索vue-awesome-swiper并下载cnpm install vue-awesome-swiper@2.6.7 --save,
在main.js中引入
import VueAwesomeSwiper from 'vue-awesome-swiper'
import "swiper/dist/css/swiper.css"
Vue.use(VueAwesomeSwiper)
代码实现:
<div class="banner">
<swiper :options="swiperOption" ref="mySwiper">
<swiper-slide v-for="item in swiperList" :key="item.id">
<img class="swiper-img" :src="item.imgUrl" >
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
声明数组,获取数据,使用v-for循环遍历数据,实现轮播图
样式实现
样式穿透
.banner >>> .swiper-pagination-bullet-active
background white
.banner
overflow: hidden
width: 100%
height: 0
padding-bottom: 26.67%
.swiper-img
width 100%;
.swiper-pagination-bullet-active
background:white !!!import
3.九宫格图标
将九宫格图标拆成组件,实现布局
<div class="swiper">
<div class="icons">
<swiper :options="swiperOptions">
<swiper-slide v-for="(page,index) in pages" :key="index">
<div class="icon" v-for="item in page" :key="item.id">
<div class="img">
<img class="content" :src="item.imgUrl" >
</div>
<p class="desc">{{item.desc}}</p>
</div>
</swiper-slide>
</swiper>
</div>
</div>
首先声明一个数组,用于获取数据,v-for循环遍历,但是每页只能显示八个,在计算属性中声明一个空数组,然后实现数组的当前下标应该展示在轮播图的第几页,一页八个图标,向下取整Math.floor(8/8)向下取整为1
const page = Math.floor(index / 8)
if (!pages[page]) {
pages[page] = []
}
pages[page].push(item)
4.热销推荐,周末去哪
通过获取数据,v-for循环遍历到页面中
三.城市列表
点击首页右上角城市,跳转到城市列表页
1.搜索
给inp框绑定input事件,v-model双向数据绑定搜索的关键字,获取到数据,对关键字的首字母和名字进行模糊搜索,如果有则添加渲染出来
2.城市数据列表
通过获取数据,将热门城市渲染出来,在城市列表中,拿到数据,ABCD等是通过拿到index下标来获取到的,然后获取到详细城市,渲染出来
3.点击右侧首字母,拿到数据
将右侧首字母固定定位到页面中,给首字母添加点击事件,并获取到当前元素距离顶部的距离,如果当前元素的顶部距离和
search(){
var arr=[]
for(var i in this.list){
this.list[i].forEach((item)=>{
if(item.spell.indexOf(this.keyword)>-1 ||item.name.indexOf(this.keyword)>-1){
arr.push(item)
}
})
}
if(this.keyword==''){
this.data=[]
}else{
this.data=arr
}
}
4.返回顶部
写一个返回顶部的盒子,点击返回顶部,让滚动距离为0 :scroll(0, 0);
四.详情页面
1.大图
先获取数据通过v-for循环遍历将图片展示出来,将大图拆分成组件,
挂载到详情页中,定义一个flag为false,给图片设置点击事件,flag值取反,大图v-show绑定flag
传递一个事件并把flag传递过去,在大图组件中通过props来接收flag,通过$emit接收传递过来的事件,实现大图展示
样式实现:
.banners {
width: 100%;
height: 100%;
background: #000;
z-index: 9999;
position: fixed;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
.swiper-img {
width: 100%;
}
}