去哪了~项目

最新推荐文章于 2024-10-08 12:37:10 发布

hlh116

最新推荐文章于 2024-10-08 12:37:10 发布

阅读量63

点赞数

文章标签： python 开发语言

本文链接：https://blog.csdn.net/m0_66698608/article/details/125138131

版权

一、vue-cli2项目开发

下载：cnpm install fastclick --save

三、iconfont图标

四、屏幕自适应

五、解决1px边框问题：都需在全局里面引入

环境

1.在移动页面视口放大缩小无效

在index.html 中写入

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

二、解决300毫秒点击延迟问题

下载：cnpm install fastclick --save

在main.js引入

import fastClick from 'fastclick'

fastClick.attach(document.body)

三、iconfont图标

在百度搜阿里图标矢量库，把需要的图标添加至购物车，进行下载本地，然后放在assets/styles,
全局引入import './assets/styles/iconfont/iconfont.css'

四、屏幕自适应

在src的根目录下创建utils文件夹，创建rem.js，最后在main.js中引入

function change(){
    let winw=document.documentElement.clientWidth||document.body.clientWidth
    document.documentElement.style.fontSize=winw*100/750+'px'
    
    
    console.log('1rem'+(document.documentElement.clientWidth||document.body.clientWidth)*100/750+'px');
}

change()

// 窗口大小改变事件
window.onresize=function(){
    change()
}

五、解决1px边框问题：都需在全局里面引入

六、css预处理器

cnpm install stylus --save -dev
cnpm install stylus-loader@3.0.2 --save -dev

使用：
<style lang="stylus" scoped>
样式只在本组件有效

七、产生抖动现象

swiper区域没有加载时候为0
加载后马上撑开图片区域大小对于后边的元素会产生抖动现象用户体验效果不好

标准外边加盒子 div
overflow: hidden
width: 100%
height: 0
padding-bottom: 26.67%

或者height :26.67vw

样式穿透：加快编译速度

好处：加快编译速度

在样式里面写入写入：

.wrapper >>> .swiper-pagination-bullet-active
background: #fff

八、首页

1.首页：是由头部，轮播图，九宫格，热销推荐，周末去哪分成不同的组件

2.头部：布局是左中右三部分组成，是一个弹性盒子，在左边盒子写一个width，中间flex：1自适应，给右边的盒子写一个min-width，最小的盒子，这样就可以使右边的内容自适应

展示代码：

视图中
 <div class="header">
        <div class="header-left">
            <div class="iconfont icon-fanhui" ></div>
        </div>
        <div class="header-input">
            <span class="iconfont">&#xe802;</span>
            输入城市/景点/游玩主题
        </div>
        <div class="header-right" @click="$router.push('../../city')">
            北京
            <span class="iconfont icon-jiantouxia"></span>
        </div>       
    </div>

样式中


@import '~styles/varibles.styl'
.header
    display flex;
    line-height $headerHeight;
    color #ffffff;
    background: $bgColor;
    .header-left
        width .64rem;
        float left;
        .icon-fanhui
            text-align center
            font-size .4rem
    .header-input
       flex 1
       height .64rem
       line-height .64rem
       background #ffffff
       margin-top .1rem
       border-radius:.1rem
       color #cccccc
    .header-right
        min-width 1rem
        padding .01rem
        float right 
        text-align center
        color #ffffff   
         .icon-jiantouxia
            margin-left -.04rem
            font-size .24rem

3.轮播图

先下载cnpm install vue-awesome-swiper@2.6.7 --save

在www.github.com中作参考vue-swiper

 <swiper  :options="swiperOption">
            <swiper-slide  v-for="(item,index) in list" :key="index">
                 <img class="swiper-img" :src="item.imgUrl" style="width:100%">
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
        </swiper>

4.九宫格：在第一页占满的情况可以滑动到第二页，也可以用轮播图来实现

  <swiper >
	<swiper-slide v-for="(page,index) in pages" :key="index">
		<div class="icon" v-for="item in page" :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>

5.在vue-cli2中渲染数据

首先：json文件放到static文件夹中

其次：在页面中使用 import index from '../../../../../static/index.json'

最后：在monted中 this.list =index.data.iconList;

九、城市的渲染

首先是热门城市的渲染

import city from "../../../../../static/city.json";

<div class="area">
		<div class="title border-topbottom">热门城市</div>
		<div class="button-list">
			<div class="button-wrapper" v-for="(item,index) in list" :key="index">
				<div class="button">{{item.name}}</div>
			</div>			
		</div>
	</div>


  mounted() {
    this.list = city.data.hotCities;
  },

所有城市的渲染及英文字母的渲染

<div class="item-list">
			<div class="item border-bottom" v-for="(it,index) in item" :key="index">
				{{it.name}}
			</div>
</div>

英文字母：

<ul class='ss'>
	  <li v-for="(item,index) in catelist"  :key="index" @click="qie(index)">{{item}}</li>
</ul>



import city from "../../../../../static/city.json";

mounted() {
    this.catelist = Object.keys(city.data.cities);
  },      


//点击响应的字母会出现对应的城市
 qie(index) {
      // console.log(index);
      console.log(document.querySelectorAll(".citys"));
      document.documentElement.scrollTop = document.querySelectorAll(".citys")[
        index
      ].offsetTop-100;
      // scroll(0,document.querySelector(`.${index}`).offsetTop)
      // console.log(document.querySelector({index}).offsetTop);
    }
//返回顶部
 go() {
      console.log(56789);
      document.documentElement.scrollTop = 0;
    },

点击相应字母下标，就会出现对应的城市，

点击下标，让浏览器距顶部的距离=所有元素，如果要对应的字母到顶部-100

qie(index) {

// console.log(index);

console.log(document.querySelectorAll(".citys"));

document.documentElement.scrollTop = document.querySelectorAll(".citys")[

index

].offsetTop-100;

// scroll(0,document.querySelector(`.${index}`).offsetTop)

// console.log(document.querySelector({index}).offsetTop);

}

返回顶部：

<div class="box" @click="go()">返回顶部</div>

go() {

console.log(56789);

document.documentElement.scrollTop = 0;

},

点击搜索

 <div class="search">
        <div>
        <span class="iconfont ff" @click="$router.go(-1)">&#xe605;</span>
        <span class="city">城市选择</span>    
        </div>
         <input type="text" placeholder="请输入搜索的内容" v-model="city" class="inp" @input="search">  
         <div v-for="(item,index) in data" :key="index">{{item.name}}</div>
         <!-- {{data}}  -->
    </div>



 // indexOf查找-1是不存在
        search(){
            var relist=[]
            for(var i in this.list){
                this.list[i].forEach((item)=>{
                    if(item.spell.indexOf(this.city)>-1||item.name.indexOf(this.city)>-1){
                        relist.push(item)
                    }
                })
            }
            if(this.city==''){
                this.data=[]
            }else{
                this.data=relist
            }
        }