前端Vue自定义滚动卡片，可以用于商品海报生成

随着技术的发展，开发的复杂度也越来越高，传统开发方式将一个系统做成了整块应用，经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改，造成牵一发而动全身。通过组件化开发，可以有效实现单独开发，单独维护，而且他们之间可以随意的进行组合。大大提升开发效率低，降低维护成本。

组件化对于任何一个业务场景复杂的前端应用以及经过多次迭代之后的产品来说都是必经之路。组件化要做的不仅仅是表面上看到的模块拆分解耦，其背后还有很多工作来支撑组件化的进行，例如结合业务特性的模块拆分策略、模块间的交互方式和构建系统等等 。

 

 

阅读全文下载完整组件代码请关注微信公众号： 前端组件开发

 

本文给大家介绍的组件：

前端Vue自定义滚动卡片，可以用于商品海报生成

 

 

实现代码如下：

# cc-scroolCard

#### 使用方法

```使用方法

<!-- dataInfo：滚动卡片数据  swiperIndex：滚动序列 @change：滚动事件-->

<cc-scroolCard :dataInfo="data" :swiperIndex="swiperIndex" @change="swiperChangeClick"></cc-scroolCard>

```

#### HTML代码实现部分

```html

<template>

<view class="content">

<!-- dataInfo：滚动卡片数据  swiperIndex：滚动序列 @change：滚动事件-->

<cc-scroolCard :dataInfo="data" :swiperIndex="swiperIndex" @change="swiperChangeClick"></cc-scroolCard>

</view>

</template>

<script>

export default {

data() {

return {

swiperIndex: 0,

data: {

"priceShop": "¥699.0",

"headImgs": ["http://qn.kemean.cn/file/upload/202005/21/1590043402088i2jxb79n.jpg?imageView2/0/w/800",

"http://qn.kemean.cn/file/upload/202005/21/1590043404759qml3zmlm.jpg?imageView2/0/w/800",

"http://qn.kemean.cn/file/upload/202005/21/1590043407501c6o63bmi.jpg?imageView2/0/w/800",

"http://qn.kemean.cn/file/upload/202005/21/1590043410966jwbtkyw1.jpg?imageView2/0/w/800",

"http://qn.kemean.cn/file/upload/202005/21/1590043413622bnysmgy9.jpg?imageView2/0/w/800"

],

"goodsName": "巴黎香奈儿沙龙香水50ml",

"goodsPrice": "¥999.0",

"recommendCodeGoods": "https://www.we123.com/d/file/xcx/2017-08-07/deceda498e19d82d71449f46828e864b.jpg",

},

}

},

methods: {

swiperChangeClick(e) {

this.swiperIndex = e.detail.current

console.log("swiperIndex = " + this.swiperIndex);

}

}

}

</script>

<style>

page{

background: #f1f1f1;

}

.content {

display: flex;

padding-top: 29px;

}

</style>

```