项目
会说话的汤姆
这个作者很懒,什么都没留下…
展开
-
图片懒加载
什么是懒加载?** 什么是图片懒加载?**** 图片需要显示在屏幕上时,再加载图片,被称为懒加载。** 对于图片过多的页面,为了加速页面的加载速度,所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载,等到滚动到可视区后再去加载,这样子对于页面加载性能上会有很大的提升,也提高了用户体验。使用vue-lazyload插件安装-导入-Vue.use()-修改img :src -> v-lazy;详情去看一下懒加载的框架。...原创 2020-12-06 23:00:33 · 62 阅读 · 0 评论 -
Vuex中的mapActions和promise
export default { addCart(context, payload) { return new Promise((resolve, reject) => { let oldProduct = context.state.cartList.find(item => { return item.iid === payload.iid }); // 判断oldProduct if ( oldProduct ){原创 2020-12-06 22:34:39 · 320 阅读 · 0 评论 -
加入商品到购物车
添加商品到vuex;// 将商品加入购物车,并且对count数量进行统计mutations: { addCart(state, payload) { // payload新添加的商品 let oldProduct = null; for(let item of state.cartList){ if(item.iid === payload.iid) { oldProduct = item; } } .原创 2020-12-06 21:56:42 · 684 阅读 · 1 评论 -
发生滚动,标题发生对应的改变
contentScroll(position) { console.log(position); const positionY = -position.y; // 和主题中的值进行对比 // [0, 1, 2, 3] // positionY 在0 和 1之间时候,index = 0 // positionY 在1 和 2之间时候,index = 1 // positionY 在2 和 3之间时候,index = 2原创 2020-12-05 16:20:30 · 99 阅读 · 0 评论 -
点击标题,滚动到对应的主题
十一. 推荐数据的战术** 请求推荐数据** GoodsList展示数据十二. mixin的使用** 创建混入对象** 组件对象中: mixins: [mixin]联动效果;底部工具栏,点击加入购物车回到顶部,也可以用混入的方式进行封装购物车十三. 处理两个bug首页tabControl详情滚动的bug十四. 标题和内容的联动效果14.1 点击标题 滚动到对应的主题P106. 数据更新的时机// 值压根就没有被渲染this.themeTopYs = [];原创 2020-12-05 15:23:45 · 254 阅读 · 0 评论 -
详情页-首页和详情页监听全局事件和mixin的使用
首先是为什么会出现这个问题?原因是首也监听的事件可能会发送到详情页,这显得逻辑上并不是很合理。第一种解决方案是采用路由的方式,进行路由切换,监听当前的路由路径,根据路由路径发射不同的事件。第二种方式是在Home页面,当页面失活时,取消页面全局事件的监听。imgLoad() { if(this.$route.path.indexOf('/home') > -1) { this.$bus.$emit('homeItemImgLoad'); } else if (this.$ro原创 2020-12-05 07:08:14 · 306 阅读 · 0 评论 -
5-1 详情页的展示
代码如何组织业务逻辑自己留的bug服务器在返回时间,只要是服务器返回时间,都不会以2020-12-4不同的展示方式不一样这样展示太麻烦,一般会以UNIX时间元年为起点返回对应的时间戳15243625361=》时间如何把时间戳转化为格式化字符串:时间戳格式化字符串:js// 对Date的扩展,将 Date 转化为指定格式的String// 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符,// 年(y)可以用 1-4 个占位符,毫秒(S)只.原创 2020-12-04 17:01:27 · 88 阅读 · 0 评论 -
回顾
七.解决首页可滚动区域问题为什么会产生这个问题?监听图片加载完防抖非父子组件通信事件总线八. 上拉加载更多九. tabControl吸顶效果offsetTop十. 保持状态keep-alivescrollTo(0, saveY, 0);refresh()...原创 2020-12-04 15:50:41 · 48 阅读 · 0 评论 -
详情页面keep-alive问题
detail的东西不能keep=alivedetail数据的组织方式后端传过来的数据是非常繁杂的,经常需要把有用的数据整合在一起。面向对象封装的思想:把咋乱wuzang的数据整合到一起。把整合后的数据传递给子组件的话会清晰明显很多。export class GoodsInfo { constructor(itemInfo, columns, services) { this.title = itemInfo.title; this.desc = itemInfo.desc;原创 2020-12-04 08:16:32 · 126 阅读 · 1 评论 -
201203-4-3-吸顶效果的实现
八.上拉加载更多scroll.vue=>Home.vue9.1 必须知道滚动到多少时有吸顶效果;offsetTop所有的组件都有一个属性$el: 用于获取组件中的元素console.log(this.$refs.tabControl.$el.offsetTop);9.1这个时候要获取tab对应的offsetTop,但是在mounted中获取tabControl的offsetTop但是,如果直接在mounted中获取tabControl的offsetTop,那么值是不正确的。如何原创 2020-12-04 00:31:00 · 100 阅读 · 0 评论 -
201203-防抖函数处理
防抖函数:y 100对于refresh非常频繁的问题,进行防抖操作,防抖debounce/节流throttle/防抖函数起作用的过程,如果我们直接执行refresh,那么refresh函数会被执行30次。可以将refresh函数放入debounce函数当中,生成一个新的函数。 debounce(func, delay = 500) { let timer; return function (...args) { if(timer) clear原创 2020-12-03 19:08:38 · 124 阅读 · 0 评论 -
201203-4-2
七. 解决首页better-scroll可滚动区域的问题:better-scroll在决定有多少区域可以滚动时候,是根据scrollHeight属性决定的。scrollHeight属性是根据better-scroll的content的子组件的高度但是在我们的首页中,刚开始在计算scrollHeight属性的时候,是没有将图片计算在内的所以计算出来的结果是错误的。后来图片加载过来之后有了新的高度,但是scrollHeight属性并没有进行更新,所以滚动出现了问题。那么如何解决这个问题呢?**.原创 2020-12-03 18:45:32 · 53 阅读 · 0 评论 -
201203-4-1-兄弟组件之间通信,杀鸡不用牛刀
1$emit,.y$emit进行处理,一般逻辑比较复杂vuex 杀鸡用牛刀???使用集成的中央数据总线。原创 2020-12-03 13:45:29 · 68 阅读 · 0 评论 -
201203-4-对昨天内容的回顾
Better-scroll####一. FeatureView独立组件的封装=>FeatureViewprops ->titlesdiv>根据titles v-for遍历 div->span{{title}}css相关选中哪一个tab,哪个tab的颜色会变色。div>a>img*currentIndex商品数据的请求goods: {pop: page/listnew: page/listcell: page/list}在home.js中封装原创 2020-12-03 09:47:16 · 155 阅读 · 0 评论 -
04-上拉加载更多
上拉加载更多:this.scroll.on(‘pullingUp’, ()=> {})原创 2020-12-03 00:27:34 · 86 阅读 · 0 评论 -
03-backTop的显示与隐藏
监听滚动事件,并且用$emit将自定义事件传递给父组件根据position.y > 阈值 控制组件显示和隐藏(v-show);<template> <div class="wrapper" ref="wrapper"> <div class="content"> <slot></slot> </div> </div></templa.原创 2020-12-03 00:19:37 · 270 阅读 · 0 评论 -
2-BetterScroll中出现的问题
![在这里插入图片描述](https://img-blog.csdnimg.cn/20201203001020151.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2MDQ4NTMy,size_16,color_FFFFFF,t_70在这里插入图片描述图片是异步记载的,图片没来之前会计算出一个可以滚动的区域,而图片来了之后呢也会原创 2020-12-03 00:15:49 · 149 阅读 · 0 评论 -
20201202-better-scroll的封装
1.在构建项目的过程中,应该尽量减少我们对某个外部组件的依赖,因为外部组件很可能会停止更新,而这个时候就需要对我们的代码进行重构,如果依赖严重的话,重构起来可能会非常困难。》高内聚,低耦合。面向包装编程》对象2.// ref如果是绑定在组件上的,那么通过this.$refs.refname获取到的是一个组件对象;3. 监听组件的点击必须添加@click.native(原生的修饰符号);4. .native: 监听组件根元素的原生事件。5. 在我们监听一个组件的原生事件时候,必须在对应事件上加上.n原创 2020-12-03 00:09:19 · 67 阅读 · 0 评论 -
Vue项目中使用better-scroll
<template> <div class="wrapper" ref="aaa"> <ul class="content"> <li>123</li> <li>123</li> <li>123</li> <li>123</li> &l原创 2020-12-02 16:43:55 · 83 阅读 · 0 评论 -
下拉加载更多-懒加载(Better-Scroll的使用)
部分区域可以滚动.content { height: 150px; background-color: red; overflow: hidden; overflow-y: scroll;/*超出部分自动隐藏*/ }better-scroll官网<template> <div class="wrapper" ref="aaa"> <ul class="content"> <li原创 2020-12-02 16:38:48 · 494 阅读 · 0 评论 -
GoodsList / GoodsListItem
gtr原创 2020-12-02 15:28:28 · 1202 阅读 · 0 评论 -
变量中数据的存储(流行/新款/精选)
goods: (流行/新款/精选)goods: {‘pop’: {page : 1, list: []},‘news’: {},‘sell’: {}}// 数据请求的封装created() { //1. 请求多个数据 this.getHomeMultidata(); //2. 请求商品数据 this.getHomeGoods('pop'); this.getHomeGoods('new'); this.getHomeGo原创 2020-12-02 07:09:50 · 104 阅读 · 0 评论 -
点击元素实现文字颜色切换
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .active { color: red; } </style></head><body><div id="原创 2020-12-01 08:11:37 · 247 阅读 · 0 评论 -
201119项目体会
设计层面上的东西:home.js面向home.vue开发,听起来就很合理。组件创建完成之后进行发送网络请求。垃圾回收机制:箭头函数执行完成之后,this会被回收,箭头变成孤零零的对象,没有引用指向对象,对象会被回收。result,res 内存地址,指向同一个对象,垃圾回收器。封装抽离的思想,Home里面的代码逻辑要尽可能的简单,而nav-bar,home-swiper,home-recommend-view尽可能的做一个抽离。文字水平垂直居中,text-align: center; line-h.原创 2020-11-29 17:26:08 · 53 阅读 · 0 评论 -
导航守卫
1.为什么要使用导航守卫?导航守卫是为了方便在路由跳转的过程之中可能需要监听路由的进入和离开的vue-router提供的beforeEach和afterEach钩子函数,它们会在路由即将改变前和改变后触发。2. 导航守卫的使用:我们可以利用beforeEach来完成标题的修改首先,我们可以在钩子当中定义一些标题,可以利用meta来定义其次,利用导航守卫,修改我们的标题导航钩子的三个参数解析{ to : 即将要进入的目标的路由对象from: 当前导航即将要离开的路由对象next: 调用该原创 2020-11-26 16:32:32 · 194 阅读 · 0 评论 -
$route和$router之间的区别
this.$router 拿到的就是我们创建的VueRouter对象this.$route指的是当前活跃的路由所有的组件都继承自Vue类的原型Vue.prototype.test = function () {console.log(“test”);}原创 2020-11-26 10:07:42 · 91 阅读 · 0 评论 -
vue-router参数传递
什么是传递参数呢?从一个组件传递到另一个界面的过程之中,是需要我们传递一些参数的,最开始渲染的肯定是App.vue, 首页被渲染,从app.vue,往用户组件里面一些东西。准备工作:第一步:创建新的组件profile.vueprofile => 配置动态路由传递参数主要有两种类型:配置路由的格式: /router/:id传递的方式:在path后面跟上对应的值传递后形成的路径: router/123, /router/abcquery的类型:配置路由的格式:/router,也就是.原创 2020-11-26 09:48:13 · 156 阅读 · 0 评论 -
Tabbar组件的封装
封装成一个独立的组件:1 2 3 4 5封装的组件要足够的灵活插槽,让外界决定只能往里面插入几个东西创建4个TabbarItem这个组件里面又可以定义图片的插槽,和文字的插槽,从而所有的东西都不是写死的。小的Item里面定义props属性,props里面定义别人传过来的一些值,props { link: } 点击item动态的跳转到某一个item里面,动态的帮你进行相关的跳转。组件封装的思想。大的组件放小的组件就好了。tab-bar的高度一般是49px@import做css文件的动态引入原创 2020-11-23 23:39:03 · 241 阅读 · 0 评论