基于vue的tab-list类目切换商品列表组件的示例代码


Posted in Javascript onFebruary 14, 2020

在大多数电商场景中,页面都会有类目切换加上商品列表的部分,页面大概会长这样

基于vue的tab-list类目切换商品列表组件的示例代码

基于vue的tab-list类目切换商品列表组件的示例代码

每次写类似场景的时候,都需要去为类目商品列表写很多逻辑,为了提高开发效率我决定将这一部分抽离成组件。

实现

1.样式

所有tab栏的样式和商品列表的样式都提供插槽,供业务自己定制

2.变量

isTabFixed: false,//是否吸顶
tab: 1,//当前tab
page: 1,//当前页数
listStatus: {
 finished: false,//是否已是最后一页
 loading: false,//是否加载中
},
items: [],//商品数组
tabMap: [],//tab列表数组
cache:{},//缓存
listName: '',//商品列表名称
tabName: '',//tab列表名称
apiName: '',//api方法名称
queryName: '',//api请求参数名称

3.缓存设计

为了减少消耗,已经请求过的商品列表我都将他们缓存下来

_addCache(proList) {
 cache[this.tab] = {
 finished: this.listStatus.finished,
 page: this.page,
 list: proList,
 };
},

4.请求数据

_getList(type) {
 let data = {};
 data[this.queryName] = this.tab;
 data.page = this.page;
 this.$http[this.apiName](data)
 .then((res) => {
 this.listStatus.finished = !res.has_more;//更新是否是最后一页的状态
 this._handleData(res.items);//处理得到的商品列表
 })
 .catch((err) => {
 note(err.message || '出错啦');
 });
},
_handleData(proList) {
 if (this.page === 1) {//表示是tab切换时请求的数据,所以直接将items的指向切换
 this.items = proList;
 } else {//因为是翻页,所以需要把数据拼接
 this.items = this.items.concat(proList);
 }
 this.$store.setData(this.listName, this.items);//把数据更新给父组件
 this._addCache(this.items);//把数据加入缓存
},

5.操作

逻辑部分主要分两块:一是列表翻页,二是tab相关

列表翻页

这部分的逻辑比较简单,主要分两点

  1. 将page加一
  2. 请求数据
_loadmore() {
 this.page = this.page + 1;
 this._getList();
},

其实对于手机列表的上拉翻页操作,还有很多的点要去注意,比如如何去避免连续请求等,由于我将这些交给了另一个专注列表渲染的组件,这里就不需要再去考虑这些操作。

tab相关

tab切换

tab切换的时候主要是两点

  1. 切换tab的指向
  2. 切换items的指向
  • 已经加载过的列表从缓存中取
  • 没有加载过的请求数据 然后还有两个体验上的点
  1. 视图应该回到顶部
  2. 切换的时候应该获取切换列表的第一页数据
changeTab(id) {
 this.tab = id;
 this.$store.setData(this.tabName, this.tab);//将tab的指向同步给父组件
 this._scrollToTab();//视图回到顶部
 if (cache[this.tab]) {
 const target = cache[this.tab];
 this.listStatus.finished = target.finished;
 this.page = target.page;
 this.items = target.list;
 this.$store.setData(this.listName, this.items);//将商品列表同步给父组件
 } else {
 this.page = 1;
 this._getList();
 }
},
//视图回到顶部
_scrollToTab() {
 let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
 let productsTop = this.$refs.products.$el.offsetTop;//商品列表距离顶部的距离
 let topHeight = this.$refs.tabNav.offsetHeight;//tab栏的高度
 if (scrollTop > productsTop) {
 window.scrollTo(0, productsTop - topHeight);
 }
},

吸顶

在吸顶的时候,需要对tab栏的样式做一些小小的变动,所以需要一个变量来知道是否吸顶了

handleNavFixed() {
 this.stickyTop = this.$store.getData('stickyTop') || 0;//吸顶的高度
 window.onscroll = (e) => {
 let top = document.documentElement.scrollTop || document.body.scrollTop;
 let tabHeight = this.$refs.tabNav.offsetTop - top - 1;
 if (tabHeight <= this.stickyTop && !this.isTabFixed) {//结合判断为了避免重复计算
 this.isTabFixed = true;
 }
 if (tabHeight >= this.stickyTop && this.isTabFixed) {
 this.isTabFixed = false;
 }
 };
},

6.组件相关

作为一个组件,不同点在于需要做到的是可用性和通用性。 对于组件如何更好的得到父组件的值并把更新的值传回父组件方面,是我在开发过程中的一个卡点,最后我用了一套基于vue的组件通行机制。这种通行机制的实现网上很多,这里就不详细说了。通行机制主要有两个功能

  • 各组件间可以互相调用方法
  • 各个组件都可以得到和更新父组件的数据

由于将tab列表都作为插槽传入,所以初始数据并不需要关心,需要关心的只是更新数据。

对于不同的页面,tab列表的名称,tab定位的名称,商品列表的名称,接口的名称,请求接口的参数都可以会不一样,所以我在这里将这些项作为参数,在初始化这个组件的时候需要传入

//组件部分
init(data = {}) {
 this.listStatus.finished = !data.hasMore;
 this.tabName = data.tabName;
 this.listName = data.listName;
 this.apiName = data.apiName;
 this.queryName = data.queryName;
 this.handleNavFixed();//判断是否吸顶
},
//调用组件
this.$bus.emit('tab-list.init', {
 tabName: 'tab',
 listName: 'items',
 apiName: 'homeList',
 queryName: 'tab_id',
 hasMore: this.hasMore,
});

总结

以上所述是小编给大家介绍的基于vue的tab-list类目切换商品列表组件的示例代码,希望对大家有所帮助!

Javascript 相关文章推荐
Chrome中模态对话框showModalDialog返回值问题的解决方法
May 25 Javascript
JavaScript游戏之优化篇
Nov 08 Javascript
JS判断表单输入是否为空(示例代码)
Dec 23 Javascript
jQuery on()方法使用技巧详解
Apr 16 Javascript
分享纯手写漂亮的表单验证
Nov 19 Javascript
Bootstrap3 图片(响应式图片&amp;图片形状)
Jan 04 Javascript
微信小程序三级联动地址选择器的实例代码
Jul 12 Javascript
基于Vue2.0+ElementUI实现表格翻页功能
Oct 23 Javascript
vue 实现 ios 原生picker 效果及实现思路解析
Dec 06 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【圆形情况】
Dec 13 Javascript
微信小程序如何获取用户头像和昵称
Sep 23 Javascript
为什么node.js不适合大型项目
Apr 28 Javascript
bootstrap-paginator服务器端分页使用方法详解
Feb 13 #Javascript
JavaScript实现Tab选项卡切换
Feb 13 #Javascript
Angular 多模块项目构建过程
Feb 13 #Javascript
小程序卡片切换效果组件wxCardSwiper的实现
Feb 13 #Javascript
JavaScript实现省市区三级联动
Feb 13 #Javascript
jquery传参及获取方式(两种方式)
Feb 13 #jQuery
JS实现页面数据懒加载
Feb 13 #Javascript
You might like
php5.3不能连接mssql数据库的解决方法
2014/12/27 PHP
Jquery从头学起第四讲 jquery入门教程
2010/08/01 Javascript
基于jquery实现点击左右按钮图片横向滚动
2013/04/11 Javascript
禁用页面部分JavaScript不是全部而是部分
2014/09/03 Javascript
Jquery针对tr td的一些实用操作方法(必看篇)
2016/10/05 Javascript
three.js加载obj模型的实例代码
2017/11/10 Javascript
gulp安装以及打包合并的方法教程
2017/11/19 Javascript
vue addRoutes实现动态权限路由菜单的示例
2018/05/15 Javascript
elementUI多选框反选的实现代码
2019/04/03 Javascript
小程序识别身份证,银行卡,营业执照,驾照的实现
2019/11/05 Javascript
webpack是如何实现模块化加载的方法
2019/11/06 Javascript
vue设置默认首页的操作
2020/08/12 Javascript
ant design vue导航菜单与路由配置操作
2020/10/28 Javascript
python里大整数相乘相关技巧指南
2014/09/12 Python
python常见的格式化输出小结
2016/12/15 Python
pytorch: tensor类型的构建与相互转换实例
2018/07/26 Python
pycharm运行程序时在Python console窗口中运行的方法
2018/12/03 Python
python3.6下Numpy库下载与安装图文教程
2019/04/02 Python
Python3实现计算两个数组的交集算法示例
2019/04/03 Python
VPS CENTOS 上配置python,mysql,nginx,uwsgi,django的方法详解
2019/07/01 Python
关于Numpy数据类型对象(dtype)使用详解
2019/11/27 Python
Django框架获取form表单数据方式总结
2020/04/22 Python
Python实现CAN报文转换工具教程
2020/05/05 Python
keras中的backend.clip用法
2020/05/22 Python
Pytorch之Tensor和Numpy之间的转换的实现方法
2020/09/03 Python
不同浏览器创建XMLHttpRequest方法有什么不同
2014/11/17 面试题
自荐信结尾
2013/10/27 职场文书
校园歌手大赛策划书
2014/01/17 职场文书
迟到检讨书300字
2014/02/14 职场文书
《水乡歌》教学反思
2014/04/24 职场文书
卫生院艾滋病宣传活动小结
2014/07/09 职场文书
租车协议书
2015/01/27 职场文书
2015年端午节活动方案
2015/05/05 职场文书
《穷人》教学反思
2016/02/19 职场文书
HTML基础详解(下)
2021/10/16 HTML / CSS
Mysql中常用的join连接方式
2022/05/11 MySQL