vue前端开发：自定义简单实用轮播图封装组件

2023-07-0308:58:22WEB前端开发Comments699 views字数 1580阅读模式

前端Vue自定义简单实用轮播图封装组件 快速实现轮播图， 下载完整代码请访问uni-app插件市场地址：ext.dcloud.net.cn/plugi文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

效果图如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

vue前端开发：自定义简单实用轮播图封装组件
vue前端开发：自定义简单实用轮播图封装组件

# cc-mySwiper文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

#### 使用方法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

```使用方法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

<!-- 自定义轮播图 swiperArr: 轮播数组 @swiperItemClick: 轮播图条目点击-->文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

<cc-mySwiper :swiperArr="banner" @swiperItemClick="swiperItemClick"></cc-mySwiper>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

```文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

#### HTML代码实现部分文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

```html文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

<template>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

<view class="content">文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

<!-- menuArr:导航菜单栏 @leftClick: 左导航按钮事件点击 @rigClick: 右导航按钮事件点击-->文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

<cc-navHeader :menuArr="menuArr" @leftClick="leftClick" @rigClick="rigClick"></cc-navHeader>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

<!-- 自定义顶部搜索框 用于搜索跳转 skipUrl:跳转url为绝对路径 /pages开头 -->文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

<cc-headSearch skipUrl="/pages/index/search"></cc-headSearch>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

<!-- 自定义轮播图 swiperArr: 轮播数组 @swiperItemClick: 轮播图条目点击-->文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

<cc-mySwiper :swiperArr="banner" @swiperItemClick="swiperItemClick"></cc-mySwiper>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

</view>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

</template>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

<script>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

export default {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

data() {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

return {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

menuArr: [{文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

"id": "1",文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

"menu": "手机",文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

"url": "/pages/phone/phone"文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

},文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

{文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

"id": "2",文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

"menu": "升学",文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

"url": "/pages/study/study"文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

},文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

{文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

"id": "3",文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

"menu": "配件",文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

"url": "/pages/parts/parts"文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

},文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

{文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

"id": "4",文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

"menu": "生活",文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

"url": "/pages/life/life"文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

],文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

banner: [{文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

"id": 1,文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

"image": "/static/image/banner1.jpg"文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

},文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

{文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

"id": 2,文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

"image": "/static/image/banner2.jpg"文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

},文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

{文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

"id": 3,文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

"image": "/static/image/banner3.jpg"文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

},文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

{文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

"id": 4,文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

"image": "/static/image/banner4.jpg"文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

]文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

},文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

mounted() {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

},文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

methods: {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

swiperItemClick(item){文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

uni.showModal({文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

title: '点击轮播图',文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

content: '点击轮播图数据 = ' + JSON.stringify(item)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

})文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

},文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

leftClick(item) {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

uni.showModal({文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

title: '点击导航栏按钮',文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

content: '点击导航栏左侧搜索按钮 '文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

})文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

},文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

rigClick(flag) {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

if (flag == 0) {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

uni.showModal({文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

title: '点击导航栏按钮',文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

content: '点击导航右侧购物车按钮 '文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

})文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

} else {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

uni.showModal({文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

title: '点击导航栏按钮',文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

content: '点击导航右侧更多按钮 '文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

})文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

</script>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

<style>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

page {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

background-color: #f7f7f7;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

.content {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

display: flex;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

flex-direction: column;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

</style>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49413.html

  • 本站内容整理自互联网，仅提供信息存储空间服务，以方便学习之用。如对文章、图片、字体等版权有疑问，请在下方留言，管理员看到后，将第一时间进行处理。
  • 转载请务必保留本文链接：https://www.cainiaoxueyuan.com/gcs/49413.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定