移动端项目-去哪玩（vue-cli2-js）

文章目录

前言

一、轮播图插件_GGo！的博客-CSDN博客

二、点击出现大图_GGo！的博客-CSDN博客

三 移动端3000毫秒延迟 点头事件 的解决方法_GGo！的博客-CSDN博客

四  index.html中添加视口 发大 缩小无效_GGo！的博客-CSDN博客

五 解决字体图标问题_GGo！的博客-CSDN博客

六 解决1px的边框像素问题_GGo！的博客-CSDN博客

七 rem使用js适应屏幕的自适应_GGo！的博客-CSDN博客

八 scroll 的用法​编辑

九 首页

十 详情  

十一  城市

十二搜索页面

总结

---

前言

完全的原生js和vue-cli2脚手架引入了各组的组件-大图，解决1px像素问题，3000毫秒延迟，解决字体图标问题，阿里图标的使用，移动端的缩放拖拽，rem字体大小，统一浏览器import样式，stylus，axios的使用

一、轮播图插件_GGo！的博客-CSDN博客

二、点击出现大图_GGo！的博客-CSDN博客

三 移动端3000毫秒延迟 点头事件 的解决方法_GGo！的博客-CSDN博客

四  index.html中添加视口 发大 缩小无效_GGo！的博客-CSDN博客

五 解决字体图标问题_GGo！的博客-CSDN博客

六 解决1px的边框像素问题_GGo！的博客-CSDN博客

七 rem使用js适应屏幕的自适应_GGo！的博客-CSDN博客

八 scroll 的用法

 

九 首页

1. 搜索的布局
2. 轮播
3. 点击跳详情 

   页面中         
      <router-link :to="'/detail/'+item.id" tag="li" v-for="item in recommendList" :key="item.id" class="li">
            </router-link>
   
   路由中
   
    {
         path: '/detail/:id',
         name: 'Detail',
         component: ()=>import("../pages/detail/Detail.vue")
       },

4. 9宫格

   使用计算属性，把获取的数据  进行除余的判断 渲染到页面中
   computed:{
       pages(){
           const pages=[]
           this.iconList.forEach((item,index) => {
              const page=Math.floor(index/8) //2/8向上区整0,    8/8向下取整1 
             if(!pages[page]){
                  pages[page]=[]
              }
              pages[page].push(item)
           });
    
           return pages
       }
   },

十 详情  

1. 轮播
2. 吸顶

      window.addEventListener('scroll',e=>{
           //    console.log(document.documentElement.scrollTop); 获取滚动的位置
           // console.log(window.pageYOffset);
           if(window.pageYOffset>150){
               this.show1=true
           }else{
               this.show1=false
           }
          });

3. 点击查看大图

   做一个盒子  v-show  默认隐藏
   点击照片 显示
   盒子里面有一个手动的轮播
   让轮播定位
   背景颜色固定
   z-index 9999
   点击其他地方  v-show  隐藏

4. 渲染 三级渲染   3个for循环

十一  城市

1. 搜索的布局
2. 当前城市和热门城市和全部城市的渲染(利用到了下标)
3. 返回顶部 

   scroll(0,0)
   

4. 侧面的导航滚动位置

   第一种方法：
   Object.kesy()获取全部下标A-Z
   点击时间 点哪个传哪个的值（A-Z）
   然后  <div :class="[`${index}`,'list']" v-for="(item,index) in list" :key="index">绑定一个class名字
   
   
     tz(i){
         
           scroll(0,document.querySelector(`.${i}`).offsetTop+275)
           //获取当前元素距离顶部距
           console.log(document.querySelector(`.${i}`).offsetTop);
           }
   第二种方法
   Object.kesy()获取全部下标A-Z
   点击时间 点哪个传哪个的下标（下标1-24）
   然后  <div class="citys list'" v-for="(item,index) in list" :key="index">绑定一个class名字
   
       qie(index) {
     
         document.documentElement.scrollTop = document.querySelectorAll(".citys")[
           index
         ].offsetTop-100;
             }

十二搜索页面

因为是数组，

 第一种：
watch:{
      title:{
          handler(val){
              var aa=[]
            var a=Object.keys(this.list)
            console.log(a);
       a.forEach(i=>{
       
             this.list[i].forEach(item => {
            if(item.spell.indexOf(val)>-1||item.name.indexOf(val)>-1){
               aa.push(item)
            }
            })
        })
        if(val==''){
            this.list1=[]
        }else{
  this.list1=aa
        }
      
          }
      }
  },
第二种：
  computed: {
    sum() {
        
      if (this.title == "") {
        return [];
      } else {
          var aa=[]
         var a=Object.keys(this.list)
         console.log(a);
       a.forEach(i=>{
             this.list[i].forEach(item => {
            if(item.spell.includes(this.title)||item.name.includes(this.title)){
                aa.push(item)
            }
            })
        })
       return aa
      }
    }
  },
第三种：@input事件
 inp(){
    //     var aa=[]
    //              var a=Object.keys(this.list)
    //      console.log(a);
       
    //    a.forEach(i=>{
    //          this.list[i].forEach(item => {
    //         if(item.spell.indexOf(this.title)>-1||item.name.indexOf(this.title)>-1){
    //            aa.push(item)
    //         }
    //         })
    //     })
    //    
//      if(this.title==''){
//             this.list1=[]
//         }else{
//   this.list1=aa
//         }
      
    }

---

总结

要在多注意基础 比如document的各种用法（pc，移动端）灵活掌握变通  学会到了原生js的一些插件