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

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

vue组件制作专题 - （mpvue专用）在mpvue中纯自己写css实现简单左右轮播相关推荐

制作一个简单的轮播图
记录一下轮播图制作(这里用的是原生js制作的) 前期准备工作 1.自己用的顺手的开发工具,我这里用的时HBuilder来写的 2.创建项目 3.在项目中创建images.css.js文件夹,把需要制作 ...
制作一个简单的轮播图（详解新手教学）
制作一个简单的轮播图(详解新手教学) 相信很多初学者,无论是前端还是后端,对于制作页面时,都想自己亲手制作一个轮播图. 如何制作一个轮播图: 基础知识:有HTML,Css,js基础本文使用技术: H ...
学习使用vue实现一个简单的轮播图
目录关于template外壳: 关于图片的自动切换的处理: 为什么要把第一张图片外的 li 克隆一份放到 li 列表的最后: 函数节流处理 : 关于template外壳: 创建一个div,用于内容的 ...
从零开始制作【立体键盘】，画UI免写CSS，【盲打练习】的交互逻辑只用了10来行表达式
手把手教你从空白页面开始通过拖拉拽可视化的方式制作[立体键盘]的静态页面,不用手写一行CSS代码,全程只用10来行表达式就完成了[盲打练习]的交互逻辑. 整个过程在众触应用平台进行,快速直观. 最终U ...
python使用pygame制作超简单斗罗大陆轮播抽奖
效果呈现: 运行后的效果差不多就是介个样纸啦前期准备虽然很简单,但是咱们还是需要一些小准备的.我们首先需要下载pygame库,用于咱们的窗口和运行条件首先 win + R 打开我们的运行窗口,然 ...
android 层叠轮播,vue手写一个卡片化层叠轮播（支持滑动，移动端连续滚动，点击）...
项目需求,需要写一个卡片化层叠的轮播,找了下插件都没有合适的,于是写了一个展示5个卡片的轮播先看效果图: 卡片化层叠轮播 5个卡片要计算各自的高度,宽度,利用相对定位计算出各自的位置然后trans ...
制作类似于淘宝点击简单的轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
vue手写一个卡片化层叠轮播五张三张
项目需求,需要写一个卡片化层叠的轮播,找了下插件都没有合适的,于是写了一个展示5个卡片的轮播先看效果图: 5个卡片要计算各自的高度,宽度,利用相对定位计算出各自的位置然后transition过渡来 ...
jQuery之制作简单的轮播图效果
[源代码] 链接:https://pan.baidu.com/s/1XpZ66D9fmSwWX3pCnGBqjA 密码:w104 [整体构思] 这个轮播图使用的是jQuery,所以Js的整体代量比较少 ...

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

在某个页面中使用它：

vue组件制作专题 - （mpvue专用）在mpvue中纯自己写css实现简单左右轮播相关推荐

最新文章

热门文章