vue组件制作专题 - (mpvue专用)在mpvue中手写css实现简单左右轮播

简介: vue组件制作专题 - (mpvue专用)在mpvue中手写css实现简单左右轮播

在mpvue中纯手写css实现简单左右轮播


项目中,在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'}
      ],
目录
相关文章
|
15天前
|
JavaScript
Vue 父传子组件传参 defineProps
Vue 父传子组件传参 defineProps
|
15天前
|
JavaScript 前端开发
Vue 创建组件
Vue 创建组件
|
19天前
|
JavaScript
vue给table组件添加合计
vue给table组件添加合计
12 0
|
15天前
|
JavaScript
vue路由导航守卫(全局守卫、路由独享守卫、组件内守卫)
vue路由导航守卫(全局守卫、路由独享守卫、组件内守卫)
30 0
|
6天前
|
JavaScript
Vue Steps步骤组件用法
Vue Steps步骤组件用法
12 0
|
10天前
|
资源调度 前端开发 JavaScript
Tailwind CSS如何在vue项目中使用
Tailwind CSS如何在vue项目中使用
29 8
|
11天前
|
JavaScript
vue 组件注册
vue 组件注册
|
11天前
|
JavaScript
vue 组件事件
vue 组件事件
|
19天前
|
JavaScript
组件中写选项的顺序(vue的问题)
组件中写选项的顺序(vue的问题)
|
19天前
|
JavaScript 数据安全/隐私保护 UED
导航守卫(全局,组件,路由独享)都有什么作用导航守卫在 Vue Router 中扮演着重要的角色,不同类型的导航守卫有着不同的作用:1. **全局导航守卫**: - **作用**:
导航守卫(全局,组件,路由独享)都有什么作用导航守卫在 Vue Router 中扮演着重要的角色,不同类型的导航守卫有着不同的作用:1. **全局导航守卫**: - **作用**:
9 0