ThinkChat🤖让你学习和工作更高效,注册即送10W Token,即刻开启你的AI之旅 广告
#### 1.1. 目录结构 - network - components -> common/content - pages -> 路由分层 - common - assets - router - store 设置CSS初始化和全局样式 - initialize.css - base.css axios的封装 - 创建axios实例 - 拦截响应,返回.data数据 - 根据传入的options发送请求,并且调用对应resolve和reject <hr> <hr> <hr> 首先开发 <div id="div1"><h5> <font color=red> 1, navbar的封装和使用 </font> <h5></div> - 封装navbar包含三个插槽:left、center、right - 设置navbar相关的样式 - 使用navbar实现首页的导航栏 <div id="div1"><h5> <font color=red> 2,请求首页数据 </font> <h5></div> - 封装请求首页更多数据 - 将banner数据放在banners变量中 - 将recommend数据放在recommends变量中 >在home.js中封装getHomeGoods(type, page) 在Home.vue中, 又在methods中getHomeGoods(type) 调用getHomeGoods('pop')/getHomeGoods('new')/getHomeGoods('sell') page: 动态的获取对应的page 获取到数据: res this.goods[type].list.push(...res.data.list) this.goods[type].page += 1 >goods: { pop: page1:/list[30] new: page1/list[30] sell: page1/list[30] } <div id="div1"><h5> <font color=red> 3,根据Swiper封装HomeSwiper </font> <h5></div> - 使用Swiper和SwiperItem - 传入banners进行展示 <div id="div1"><h5> <font color=red> 4,封装FeatureView </font> <h5></div> * 独立组件封装FeatureView * div>a>img <div id="div1"><h5> <font color=red> 5,封装RecommendView </font> <h5></div> - 展示一张图片即可 <div id="div1"><h5> <font color=red> 6,封装tabControl </font> <h5></div> - 基本结构的封装 - 监听点击 > * props -> titles div>根据titles v-for遍历 div -> span{{title}} 选中哪一个tab, 哪一个tab的文字颜色变色, 下面border-bottom ==currentIndex== ==获取到tabControl的offsetTop== 必须知道滚动到多少时, 开始有吸顶效果, 这个时候就需要获取tabControl的offsetTop,但是, 如果直接在mounted中获取tabControl的offsetTop, 那么值是不正确. * 如何获取正确的值了? * 监听HomeSwiper中img的加载完成,加载完成后, 发出事件, 在Home.vue中,获取正确的值. * 为了不让HomeSwiper多次发出事件,可以使用isLoad的变量进行状态的记录. * 注意: 这里不进行多次调用和debounce的区别 ==监听滚动, 动态的改变tabControl的样式== 问题:动态的改变tabControl的样式时, 会出现两个问题: 问题一: 下面的商品内容, 会突然上移 问题二: tabControl虽然设置了fixed, 但是也随着Better-Scroll一起滚出去了. * 解决停留问题. 在最上面, 多复制了一份PlaceHolderTabControl组件对象, 利用它来实现停留效果. *当用户滚动到一定位置时, PlaceHolderTabControl显示出来. *当用户滚动没有达到一定位置时, PlaceHolderTabControl隐藏起来. <div id="div1"><h5> <font color=red> 7,请求和保存商品数据 </font> <h5></div> - 定义goodsList变量,用于存储请求到的商品数据 - 根据type和page请求商品数据 - 将商品数据保存起来 <div id="div1"><h5> <font color=red> 8,封装GoodsList和GoodsListItem </font> <h5></div> - 展示商品列表,封装GoodsList - 列表中每一个商品,封装GoodsListItem - 注意CSS属性的设置即可 <div id="div1"><h5> <font color=red> 9,滚动的封装Scroll </font> <h5></div> - 安装better-scroll - 封装一个独立的组件,用于作为滚动组件:Scroll - 组件内代码的封装: - 1.创建BetterScroll对象,并且传入DOM和选项(probeType、click、pullUpLoad) - 2.监听scroll事件,该事件会返回一个position - 3.监听pullingUp事件,监听到该事件进行上拉加载更多 - 4.封装刷新的方法:this.scroll.refresh() - 5.封装滚动的方法:this.scroll.scrollTo(x, y, time) - 6.封装完成刷新的方法:this.scroll.finishedPullUp ###### 滚动问题 (图片加载) Better-Scroll在决定有多少区域可以滚动时, 是根据scrollerHeight属性决定,scrollerHeight属性是根据放Better-Scroll的content中的子组件的高度 * 但是我们的==首页中, 刚开始在计算scrollerHeight属性时, 是没有将图片计算在内的==所以, 计算出来的告诉是错误的(1300+) * 后来图片加载进来之后有了新的高度, 但是scrollerHeight属性并没有进行更新. 所以滚动出现了问题 >监听每一张图片是否加载完成, 只要有一张图片加载完成了, 执行一次refresh() 如何监听图片加载完成了? * 原生的js监听图片: img.onload = function() {} * Vue中监听: @load='方法' 调用scroll的refresh() 如何将GoodsListItem.vue中的事件传入到Home.vue中 >因为涉及到非父子组件的通信, 所以这里我们选择了**事件总线** * bus ->总线 * Vue.prototype.$bus = new Vue() * this.bus.emit('事件名称', 参数) * this.bus.on('事件名称', 回调函数(参数)) <div id="div1"><h5> <font color=red> 10,上拉加载更多 </font> <h5></div> - 通过Scroll监听上拉加载更多。 - 在Home中加载更多的数据。 - 请求数据完成后,调动finishedPullUp <div id="div1"><h5> <font color=red> 11,返回顶部 </font> <h5></div> - 封装BackTop组件 - 定义一个常量,用于决定在什么数值下显示BackTop组件 - 监听滚动,决定BackTop的显示和隐藏 ```javascript * isShowBackTop: false * 监听滚动, 拿到滚动的位置: * 如果 -position.y > 1000 那么 -> isShowBackTop: true * isShowBackTop = -position.y > 1000 ``` - 监听BackTop的点击,点击时,调用scrollTo返回顶部 ```javascript * 直接监听back-top的点击, 但是可以直接监听? * 不可以, 必须添加修饰.native * 回到顶部 * scroll对象, scroll.scrollTo(x, y, time) * this.$refs.scroll.scrollTo(0, 0, 500) ``` <div id="div1"><h5> <font color=red> 12,tabControl的停留 </font> <h5></div> - 重新添加一个tabControl组件(需要设置定位,否则会被盖住) - 在updated钩子中获取tabControl的offsetTop - 判断是否滚动超过了offsetTop来决定是否显示新添加的tabControl