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

你的名字 2022-08-28 04:58 162阅读 0赞

# 效果图： #

![在这里插入图片描述][9a3f1f02747f4afdacca0d5517479f12.png]

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

# 在父组件中的效果： #

![在这里插入图片描述][a4e034d66eda4cf5a3c0fe57ab125ae2.png]

[9a3f1f02747f4afdacca0d5517479f12.png]: /images/20220828/604d658df476413aa1b1ca275cc02df2.png
[a4e034d66eda4cf5a3c0fe57ab125ae2.png]: /images/20220828/d98a0b6fcc7d422e9bc14697fed141de.png

发表评论取消回复

表情：

评论列表（有 0 条评论，162人围观）

还没有评论，来说两句吧...

相关阅读

相关轮播图实现(含1.自动轮播 2.左右点击轮播 3.图片数点击播放)

轮播图实现(含1.自动轮播 2.左右点击轮播 3.图片数点击播放) // An highlighted block <!DOCTYPE html> <

Love The Way You Lie/ 2022年10月26日 04:56/ 0 赞/ 197 阅读

相关 android轮播图引导页

android轮播图引导页（因为是引导页，所以不具备自动轮播的功能）示例：![引导页][20210403182600249.png] 代码后面有数字，3.1开始就是开

小咪咪/ 2022年10月22日 04:13/ 0 赞/ 194 阅读

相关左右无缝轮播html,JS实现左右无缝轮播图代码

废话不多说了，直接给大家贴代码了。无缝轮播图：无缝轮播图 \\{margin: 0;padding:0; \} ul\{list-style: none;\} .

痛定思痛。/ 2022年10月10日 02:09/ 0 赞/ 363 阅读

相关 html点击小图轮播图,使用纯CSS实现点击轮播图效果，无js。

使用纯CSS实现图片轮播效果首先我们来看一下所实现轮播图的最终效果： ![03d7fc1b7850][] 轮播图效果接下来为html+css代码部分：以下为H

r囧r小猫/ 2022年10月07日 08:52/ 0 赞/ 486 阅读

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

效果图： ![在这里插入图片描述][9a3f1f02747f4afdacca0d5517479f12.png] <template> <div cl

你的名字/ 2022年08月28日 04:58/ 0 赞/ 163 阅读

相关简单轮播图2（左右）

HTML部分 <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

电玩女神/ 2022年06月09日 12:28/ 0 赞/ 210 阅读

相关 JQuery轮播图左右焦点（基础版）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta nam

我不是女神ヾ/ 2022年05月31日 09:51/ 0 赞/ 228 阅读

相关原生js点击轮播点击切换图片

![20180413143155395][] <!DOCTYPE html> <html> <head> <meta charset=

╰+哭是因爲堅強的太久メ/ 2022年05月27日 06:51/ 0 赞/ 292 阅读

相关 js图片轮播（翻页切换）

> 前面已经介绍了两种常见的图片轮播样式，今天将介绍一种更为常见的图片轮播形式，和淘宝的功能样式类似，这三种轮播基本上涵盖了常见网站图片轮播的所有类型，难度的话，个人认为淡入淡

傷城~/ 2022年04月23日 01:26/ 0 赞/ 266 阅读

相关图片左右点击切换轮播js特效

常用相册图片左右点击切换轮播，可应用在商品详情、汽车展示、相册展示等，jQuery左右按钮切换图片，点击小图缩略图可切换到对应的大图，当缩略图过多时可点击左右按钮控制底部缩略图

Love The Way You Lie/ 2022年03月28日 05:49/ 0 赞/ 289 阅读