当前位置 博文首页 > jcLee95的博客:vue组件制作专题 - (mpvue专用)在mpvue中纯自
CSDN:jcLee95
邮箱:291148484@163.com
项目中,在src目录下的components
目录下新建一个新文件并重命名为jcmv-carousel-slide.vue
。
文件中添加以下内容,并保存:
<template>
<div class="slide">
<ul class="slide-auto">
<li v-for="item in slideimgs" :key="item" @click="handleClick(item.drto)">
<img :src="item.imgsrc" />
</li>
</ul>
</div>
</template>
<script>
export default {
data () {
return {
}
},
methods: {
handleClick (drto) {
try {
mpvue.navigateTo({url: drto})
} catch (e) {
console.log(e)
}
}
},
props: {
slideimgs: {
type: Array,
default: []
}
}
}
</script>
<style>
.slide {
position: relative;
margin: auto;
width: 750rpx;
height: 200rpx;
text-align: center;
font-family: Arial;
color: #FFF;
overflow-y: hidden;
overflow-x: scroll;
}
.slide ul {
margin: 0rpx;
padding: 0;
width: calc(750rpx * 5);
transition: all 0.5s;
float: left;
}
/*//自动播放*/
.slide .slide-auto {
animation: marginLeft 10.5s infinite;
}
.slide li {
float: left;
width: 750rpx;
height: 300rpx;
list-style: none;
line-height: 200rpx;
}
.slide li img {
width: 750rpx;
height: 200rpx;
}
.slide li:hover {
display: block;
}
@keyframes marginLeft {
0% {
margin-left: 0;
}
28.5% {
margin-left: 0;
}
33.3% {
margin-left: -750rpx;
}
62% {
margin-left: -750rpx;
}
66.7% {
margin-left: -1500rpx;
}
95.2% {
margin-left: -1500rpx;
}
100% {
margin-left: 0;
}
}
</style>
在main.js
中,全局导入该组件:
import IMGSlide from '@/components/jcmv-carousel-slide.vue'
然后注册之:
Vue.component('IMGSlide', IMGSlide)
我们接下来需要给定的是该组件的数据,即图片存放的目录,这样就可以使用了。这个数据是一个数组,看起来是这个样子的:
slideimgs1: [
{id: 0, imgsrc: '/static/images/ads/ad1.jpg', drto: '../mytask/main'},
{id: 1, imgsrc: '/static/images/ads/ad2.jpg', drto: '../mytask/main'},
{id: 2, imgsrc: '/static/images/ads/ad3.jpg', drto: '../mytask/main'},
{id: 3, imgsrc: '/static/images/ads/ad4.jpg', drto: '../mytask/main'},
{id: 4, imgsrc: '/static/images/ads/ad5.jpg', drto: '../mytask/main'}
],
cs