vue+elementUi实现滚动轮播同屏与不同屏(功能实现)

港控/mmm° 2022-09-02 04:25 308阅读 0赞

我不得不吐槽一下，我的`js`水平，真的是烂。哎，学吧。

前几天写了一个关于竖向轮播的功能，链接如下：[实现两个公告同屏滚动轮播(elementUi-走马灯效果实现)][elementUi-]

效果如下：  
![在这里插入图片描述][59729d68d9574b0d9f850f12a1268190.gif_pic_center]  
代码如下：

<el-carousel height="26px" direction="vertical" indicator-position="none" :autoplay="autoplay">
        <el-carousel-item v-for="(items, indexs) in carouselList" :key="indexs">
            <div v-for="(item,index) in items">恭喜，<span><span><span class="textCls" style="width:48px;">{ { item.Item1}}</span> { { item.Item2}}</span> 用户申请的 <span>{ { item.Item3}}</span> 的样品 <span> 已发货</span></span></div>
        </el-carousel-item>
    </el-carousel>

上面代码中的`carouseList`是一个二维数组。这样就可以实现上面的效果了。

但是今天设计跟我说这种效果不好，要做的是下面的效果：  
![在这里插入图片描述][9a46aca7467d46ebb717195565da04cc.gif_pic_center]  
也就是说：一屏是有2条数据，但是滚动的时候需要一个个的轮播。

网上的很多例子都是用`js`或者`jq`的方式来实现的。  
我还是想用`elementUI`中的轮播图功能(走马灯)，因为我的`js`比较烂，写的话，会比较麻烦。

先来分析一下，如果用走马灯，该怎么实现上面的功能。

### 1.首先要有两个轮播组件，上面一个下面一个 ###

#### 2.为了能够实现滚动连续的效果，需要将两个轮播组件的内容处理一下 ####

为了简单一点，我更换了轮播的内容，用最简单的数字数组来展示：  
![在这里插入图片描述][8b8b123311a04673b4e64d1d8880ec2f.gif_pic_center]  
通过上面的效果可以发现，这就是我们想要的：

对应的代码如下：

<el-carousel height="26px" direction="vertical" indicator-position="none" :autoplay="autoplay">
        <el-carousel-item v-for="(item, indexs) in [1,2,3,4,5]" :key="indexs">
            <div>恭喜，{ { item}}<span><span>的样品 <span> 已发货</span></span></div>
        </el-carousel-item>
    </el-carousel>
    <el-carousel height="26px" direction="vertical" indicator-position="none" :autoplay="autoplay">
        <el-carousel-item v-for="(item, indexs) in [2,3,4,5,1]" :key="indexs">
            <div>恭喜，{ { item}}<span>的样品 <span> 已发货</span></span></div>
        </el-carousel-item>
    </el-carousel>

可以看到，为了能够实现连续轮播的效果，第二个轮播的数据中，将第一项内容放在了数组的最后，从而实现如上的效果。

因此我们需要做的就是保留两组数组数据，第二组数组数据将头部数据放到数组最后即可。

这个地方特别需要注意：

## 改变数组的顺序时，为了不改变引用值地址，需要通过深度克隆的方式 ##

this.carouselList = res.Data;
    var arr = JSON.parse(JSON.stringify(this.carouselList));
    var item = arr.shift();
    arr.push(item);
    this.carouselList2 = arr;

对应的`html`代码如下：

<el-carousel height="26px" direction="vertical" indicator-position="none" :autoplay="autoplay">
        <el-carousel-item v-for="(item, indexs) in carouselList" :key="indexs">
            <div>恭喜，<span><span><span class="textCls" style="width:48px;">{ { item.Item1}}</span> { { item.Item2}}</span> 用户申请的 <span>{ { item.Item3}}</span> 的样品 <span> 已发货</span></span></div>
        </el-carousel-item>
    </el-carousel>
    <el-carousel height="26px" direction="vertical" indicator-position="none" :autoplay="autoplay">
        <el-carousel-item v-for="(item, indexs) in carouselList2" :key="indexs">
            <div>恭喜，<span><span><span class="textCls" style="width:48px;">{ { item.Item1}}</span> { { item.Item2}}</span> 用户申请的 <span>{ { item.Item3}}</span> 的样品 <span> 已发货</span></span></div>
        </el-carousel-item>
    </el-carousel>

完成！！！

[elementUi-]: https://blog.csdn.net/yehaocheng520/article/details/119186823?spm=1001.2014.3001.5501
[59729d68d9574b0d9f850f12a1268190.gif_pic_center]: /images/20220829/0281f1c286fe4487bb8bf41f8aa42aae.png
[9a46aca7467d46ebb717195565da04cc.gif_pic_center]: /images/20220829/76dfa15f28cd4975b0c26d5dcda8d835.png
[8b8b123311a04673b4e64d1d8880ec2f.gif_pic_center]: /images/20220829/581eb49550084cd592d8efbd3a2b92d8.png