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

<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>

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'}
      ],