1200字范文 > vue自定义单向列表(横向或纵向)

vue自定义单向列表(横向或纵向)

时间：2021-03-31 13:59:09

相关推荐

vue自定义单向列表(横向或纵向)

template部分

css部分

css部分根据自己想法来

.dataNavPrev {margin-bottom: 10px;}.dataNavNext,.dataNavPrev {width: 100%;display: flex;cursor: pointer;justify-content: center;}

js部分

data(){return {// 列表移动的距离move: 0,// 如果要改成横向把这个JS里的内容的Height改为WeightdataNavListRealHeight: 0,dataNavListViewHeight: 0,}}handleNavScroll() {// scrollWidth获取整个菜单实际高度// 如果要改成横向把这个JS里的内容的Height改为Weightthis.dataNavListRealHeight = this.$refs.dataNavList.scrollHeight;// offsetWidth获取菜单在当前页面可视高度// 如果要改成横向把这个JS里的内容的Height改为Weightthis.dataNavListViewHeight = this.$refs.dataNavList.offsetHeight;//实际宽度减去可视宽度就是可移动的范围即move的范围// 窗口大小变化时触发。实时更新可视宽度// 如果要改成横向把这个JS里的内容的Height改为Weightwindow.onresize = () => {return (() => {this.dataNavListViewHeight = this.$refs.dataNavList.offsetHeight;//注1，详见下方if (this.move >this.dataNavListRealHeight - this.dataNavListViewHeight - 60) {this.move = this.dataNavListRealHeight - this.dataNavListViewHeight;}})();};},// 当菜单项向右的可移动距离大于单个菜单项的宽度时，move减去一个菜单项的宽度（即右移移动一个菜单项的宽度），// 当菜单项向右的可移动距离小于单个菜单项的宽度时，move等于0（即回到最开始没有移动的状态）navPrev() {if (this.move > 60) {this.move = this.move - 60;} else {this.move = 0;}},// 当菜单项向左的可移动距离大于单个菜单项的宽度时，move减去一个菜单项的宽度（即左移移动一个菜单项的宽度），// 当菜单项向左的可移动距离小于单个菜单项的宽度时，move等于可以向左移动的最大值（即到最末尾）// 如果要改成横向把这个JS里的内容的Height改为WeightnavNext() {if (this.move <this.dataNavListRealHeight - this.dataNavListViewHeight - 60) {this.move = this.move + 60;} else {this.move = this.dataNavListRealHeight - this.dataNavListViewHeight;}},

使用方法：注意！！！（如果列表为请求得到的数据，需要在请求里写，并且在nextTick里调用该方法；如果数据固定在页面data里，则在生命周期mounted调用该方法即可）

getData(){api.getData().then(res => {this.$nextTick(() => {this.handleNavScroll();});})},

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。