去哪儿项目总结

最新推荐文章于 2024-07-06 16:47:02 发布

幸1

最新推荐文章于 2024-07-06 16:47:02 发布

阅读量125

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/zhangyu812/article/details/125140017

版权

项目名称：

去哪儿

项目功能：

home页面数据渲染

detail页面数据渲染一级二级点击图片放大并且可以切换图片下拉到一定位置出现头部组件

city页面数据渲染搜索还有最为主要的侧边字母表触摸指定字母左边数据会跟着变换

初始化：

1.index.html中添加视口发大缩小无效

2.rem.js 通过js进行适配
安装 cnpm install fastclick --save

全局引入 main.js
import fastClick from 'fastclick'

fastClick.attach(document.body)

3.采用stylus css预处理器
cnpm install stylus --save -dev
cnpm install stylus-loader@3.0.2 --save -dev

更改项目文件中的相对路径

'styles': resolve('src/assets/styles')

home页面用父子组件传值方式就是根据axios请求数据渲染数据添加样式轮播图可以下载vue-awesome-swiper插件实现轮播引入插件

安装：cnpm install vue-awesome-swiper@2.6.7 --save

引入：import VueAwesomeSwiper from 'vue-awesome-swiper'
import "swiper/dist/css/swiper.css"
Vue.use(VueAwesomeSwiper)

detail页面用父子组件传值方式进行数据渲染点击图片放大实现轮播效果一级二级三级先将一级渲染完再通过递归的方式调用自身增加name属性来实现二三级

滑动到一定高度出现头部组件：

在滚动到一定区域时头部显现出来实现渐隐渐显效果

handleScroll(){
        //document.documentElement.scrollTop   pc端使用  document.body.scrollTop 移动端使用
        console.log(document.body.scrollTop)
        const top = document.body.scrollTop
        if (top > 60) {
           let opacity = top / 140
            opacity = opacity > 1 ? 1 : opacity
            this.opacityStyle = { opacity }
            this.showAbs = false
        } else {
                this.showAbs = true
        }
    },

city页面用父子组件传值方式将页面进行数据渲染搜索使用字母表可以安装Better-scroll插件

安装：cnpm install better-scroll@1.8.1 --save

引入：import Bscroll from 'better-scroll'

字母表添加向上向下触摸滑动

添加触控事件

@touchstart = "handleTouchStart"
@touchmove = "handleTouchMove"
@touchend = "handleTouchEnd"

并且移动字母的时候执行频率会很高就可以用到函数节流限制函数频率

timer : null

if (this.timer) {
clearTimeout(this.timer)
}

this.timer = setTimeout(()=>{
   const touchY =e.touches[0].clientY - 79
   console.log(touchY)
   // index触控位置的下标 20量为字符的高度
   const index =Math.floor( (touchY - this.startY)/20)
   console.log(index)
   if (index >= 0 && index < this.letters.length ) {
       this.$emit("change", this.letters[index])
   }
},16)