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