二.TabControl
独立组件的封装
props->titles
div->根据titles v-for遍历 div ->spanVue项目总结
css相关
选中哪一个tab，哪一个tab的文字颜色变色，下面有一个border-bottom- currentIndex
三.首页商品数据的请求
3.1 设计数据结构，用于保存数据
goods:{
pop：page/listnew: page/list
sell: page/list
}3.2 发送数据请求
在home.js中封装getHomeGoods
在Home.vue中 的methods中getHomeGoods（type）
调用getHomeGoods(‘pop’)/getHomeGoods(‘new’)/getHomeGoods(‘sell’)
page:动态的获取对应的pageprops：goods->list[30]
v-for goods ->GoodsListItem[30]
GoodsListItem(组件)->GoodsItem(数据)
4.2封装GoodsListItem.vue组件
props：goodsItem
goodsItem 取出数据。并且用div/span/img基本标签进行展示
五.对滚动进行重构 Better-Scroll
5.1在index.html中使用Better-Scroll
- const bscroll = new BScroll (el,{ })
- 注意：wrapper->content->很多内容
- 1.监听滚动
·probeType：0/1/2（手指滚动）/3（全部监听）
·bscroll.on (‘scroll’,(position)=>{}) - 2.上拉加载
· pullUpLoad:true
· bscroll.on(‘pullingUp’,()=>{}) - 3.click:false
· button可以监听点击
· div不可以5.2 在Vue项目中使用Better-Scroll
- 对Better-Scroll中进行封装： Scroll.vue
- Home.vue和Scroll.vue之间进行通信
·Home.vue 将probeType设置为3
·Scroll.vue 需要通过$emit.实时将事件发送到Home.vue
六.回到顶部BackTop
6.1对BackTop.vue 进行封装
6.2如何监听组件的点击
- 添加修饰符.native
- 回到顶部：
1
2`scrollTo(x,y,time=300){ this.scroll.scrollTo(x,y,time)},`
`this.$refs.scroll.scrollTo(0,0)`
6.3BackTop组件的显示和隐藏
- isShowBackTop：false
- 监听滚动。 拿到滚动的位置：
this.isShowBackTop=(-position.y)>1000
七.Better-Scroll滚动区域的Bug
八.上拉加载更多功能
- 监听滚动到底部
九.tabControl的吸顶效果
9.1 获取到tabControl的offsetTop
- 必须知道滚动到多少时,开始有吸顶效果,这时就需要获取tabControl 的offsetTop
- 但是如果直接在mounted中获取tabControl的offsetTop,那么值是不正确的
- 获取正确的值
- 监听HomeSwiper中img的加载完成
- 加载完成后,发出事件,在Home.vue中,获取正确的值
- 补充
- 为了不让HomeSwiper多次发出事件
- 可以使用isLoad的变量进行记录
- 注意:这里不进行多次调用和debounce的区别
9.2 监听滚动 动态改变tabControl的样式
问题:动态改变tabControl的样式时,两个问题:
- 问题一:下面的商品内容会突然上移
- 问题二:tabControl虽然设置了fixed.但是也随着BS一起滚出去了
其他方案解决停留问题:
- 在nav下面复制一份PlaceHolderTabControl组件对象,来实现停留效果
- 当用户滚动到一定的位置时,PlaceHolderTabControl显示出来
- 当用户滚动没有达到一定的位置时, PlaceHolderTabControl是隐藏的
十.让home保持原来的状态
10.1让home不要随意销毁掉
- keep-alive
10.2让Home中的内容保持原来的位置
- 离开时,保存一个位置信息 saveY
- 进来时,将位置设置为原来保存的位置saveY信息即可
- 注意 最好再回来时 进行一次 refresh()
十一.详情页
11.1 推荐数据展示
- 请求推荐数据
- 利用GoodsList来进行数据展示
11.2 标题内容联动效果
联动的效果
在detail中监听标题的点击,获取index
滚动到对应的主题:
- 获取所有主题的offsetTop
- 问题:在哪里能获取到正确的offsetTop
- created 不能获取元素
- mounted也不行,数据还没有获取到
- 获取到数据的回调中也不行,DOM没有渲染完
- $nextTick也不行是因为图片的高度没有被计算在类
- 在图片加载完成后,获取的高度才是正确的
内容滚动显示正确的标题
普通做法
1
2
3
4this.currentIndex !=i&&((i<length -1)&& positionY>=this.themeTopYs[i] && positionY <
this.themeTopYs[i+1]||(i === length -1 &&
positionY>=this.themeTopYs[i]条件成立: (this.currentIndex !=i)
条件一:防止赋值的过程过于频繁
条件二:
(i<length -1)&& positionY>=this.themeTopYs[i] && positionY < this.themeTopYs[i+1]||(i === length -1 && positionY>=this.themeTopYs[i]
1: (i<length -1)&& positionY>=this.themeTopYs[i] && positionY < this.themeTopYs[i+1]
判断区间 在0 和某个数字之间 i<length -1
2: (i === length -1 && positionY>=this.themeTopYs[i]
判断大于等于:i === length -1hack做法:利用MAX_VALUE
this.currentIndex!=i && (positionY >=
this.themeTopYs[i]&&positionY<this.themeTopYs[i+1]
回到顶部组件
CartList ->Scroll(滚动问题)
CartListItem->CheckButton
4.商品选中与不选中
- 修改模型对象! 改变选中不选中
5.底部工具栏的汇总
- 全选按钮
- 计算总价格
- 去计算
6.购物车的全选按钮
- 显示的状态
- 判断是否有一个不选中
- 点击全选按钮
- Vuex的补充
- Actions可以返回Promise
- mapActions的映射关系
补充的一些细节
1.fastClick ( 减小点击延迟 )
- 安装npm install fastClick
- 导入import FastClick from ‘fastclick’
- 调用FastClick.attach(document.body)
2.图片的懒加载
- 图片懒加载
- 图片需要现在在屏幕上时,再加载这张图片
- vue-lazyload
- 安装
- 导入
- Vue.use
- 修改img:src->vue-lazy
