效果图：

<template><div class="box" style="height:200px;"><!-- 左 --><div class="box-left" @click="submitrote('left')" @mouseenter="chenge_menu(1)" @mouseleave="chenge_menu(2)"><el-image :src="num === 0 ? arrow_url_disabled : arrow_url" style="height:100%" v-if="left_visible"></el-image></div><!-- 中 --><div class="box-center" ref="boxCenter" @mouseenter="chenge_menu(1)" @mouseleave="chenge_menu(2)"><ul class="flex-row-nw-box"><li class="flex-auto" v-for="(item,index) in show_statistics_arr" :key="index" :style="{'background-image': item.color}"><div :title="item.menu_name" @click="junp_to(item)"><div><span style="font-size:18px;font-weight:500;">{{item.menu_name}}</span></div><div style="font-size:18px;"><span>已用</span><span style="font-weight:bold;fonst-size:28px;">{{item.menu_name}}</span><span>元</span></div><div><span>剩余</span><span style="font-weight:bold;fonst-size:16px;">{{item.menu_name}}</span><span>元</span></div></div></li></ul></div><!-- 右 --><div class="box-right" @click="submitrote('right')" @mouseenter="chenge_menu(1)" @mouseleave="chenge_menu(2)"><el-image :src="right_visible ? arrow_url : arrow_url_disabled" style="height:100%" v-if="left_visible"></el-image></div></div>
</template>

<script>
export default {name: '',props:{statistics_data:{type:Array}},data() {return {left_visible:false,right_visible:false,show_statistics_arr:[],arrow_url: require('./a.npg'), //左右箭头arrow_url_disabled:require('./a.npg'),//左右箭头，colorlist:['#1111','#2222','#1111','#2222'],num:0,card_count:0};},created(){this.show_statistics_arr.forEach((item,index) => {item.menu_color = this.colorlist[index % this.colorlist.length]})},mounted(){if(document.getElementsByClassName('box-center')[0].clientWidth <= 1392){this.card_count = 6}else{this.card_count = 5}this.init_main()},methods: {init_main(){this.show_statistics_arr = []this.statistics_data.forEach((item,index) => {if(index > this.num){if(this.show_statistics_arr.length < this.card_count){this.show_statistics_arr.push(item)}}})this.show_statistics_arr.splice()this.right_visible = this.num <= this.statistics_data.length - this.card_count},submitrito(item){if(thsi.statistics_data.length >= this.card_count){if(item === 'left' && this.num > 0){this.num--this.init_main()}else if(item === 'right' && this.num >= 0 && this.num <= this.statistics_data.length - this.card_count){this.num++this.init_main()}}},chang_menu(type){this.left_visible = type === 1},jump_to(item){console.log(item);}},
};
</script>

<style lang="less" scoped>
.box{width: 100%;padding: 10px;
}
.box .box-left{width: 2%;height: 60%;float: left;cursor: pointer;
}
.box .box-center{width: 96%;height: 60%;float: left;text-align: left;overflow: hidden;
}
.box .box-center ul{height: 100%;
}
.box .box-center ul li{height: 100%;margin: 0 5px;border-radius: 10px;padding: 10px;color: #fff;cursor: pointer;
}
.box .box-right{width: 2%;height: 60%;float: right;transform: rotate(180deg);cursor: pointer;
}.flex-row-nw-box{.flex-row .flex-nowrap{}
}
.flex-auto{}
</style>

在父组件中的效果：

数据轮播图翻页封装（左右点击）相关推荐

vue后台获取数据量确定渲染轮播图的页量
轮播图每页展示6条数据,数据量不确定.轮播图页数要随着数据量的大小来确定贴代码: <el-carousel trigger="click" :autoplay='false ...
轮播图高度自适应_干货！弘成教你写轮播图全自动适应封装代码
点击蓝字关注我们在弘成教育任UI讲师,带了几十个班数百个学生了,我发现学生们最头疼的不是网站界面的设计,各种网站的设计,专题页,详情页,店铺装修,他们都能设计得漂漂亮亮.也不是HTML+CSS的静 ...
Swift-ScrollView轮播图的简易封装和使用
不多说,轮播图是开发中必要一项技能,直接上代码: 先说我的思路:首次继承于UIScrollView类自定义MyScrollView,在MyScrollView里自定制方法,func creatMySc ...
php详情页图片尺寸,拼多多主图轮播图详情页图片尺寸要求大全
1.拼多多商品轮播图: a. 尺寸宽度和高度都需要大于等于480px,正方形最好. b. 大小1M以内,不能超过1M. c. 数量限制在10张以内,等于10章. d. e. 主轮播图背景为纯白色(服饰 ...
js图片轮播（翻页切换）
前面已经介绍了两种常见的图片轮播样式,今天将介绍一种更为常见的图片轮播形式,和淘宝的功能样式类似,这三种轮播基本上涵盖了常见网站图片轮播的所有类型,难度的话,个人认为淡入淡出是比较难的,但只要用心,仔 ...
html点击小图轮播图,使用纯CSS实现点击轮播图效果，无js。
使用纯CSS实现图片轮播效果首先我们来看一下所实现轮播图的最终效果: 轮播图效果接下来为html+css代码部分: 以下为HTML代码部分: 以下为CSS代码部分: *{ margin:0; p ...
uni轮播图添加页数
注意不要放错位置,在swiper-item里面 top_banner是图片循环的数组 <view class='rLInedx'>{{index + 1}}/{{top_banner.le ...
微信小程序自定义swiper轮播图面板指示点|小圆点|进度条
描述: 在工作中开发一个页面,多少都会用到轮播图,但是由于微信官方提供的轮播图swiper组件局限性太大了,所以接下来我会教大家怎么去自定义轮播图的进度条. 简单修改: 如果你的项目只是简单的修改小圆 ...
bootstrap轮播图原点变为方块_JS实现无缝切换轮播图(自动+手动)
一.背景说起轮播图,大家应该都不陌生,各大购物网站和面试题里都能看到它的身影. 实现上也并不困难,而写这篇文章是想整理一下自己心血来潮写的代码,以及实现过程中的一些思考,大家也可以顺便复习巩固一下. ...

数据轮播图翻页封装（左右点击）

效果图：

在父组件中的效果：

数据轮播图翻页封装（左右点击）相关推荐

最新文章

热门文章