效果圖：

<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>

在父組件中的效果：

總結

以上是生活随笔為你收集整理的数据轮播图翻页封装（左右点击）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。