轮播图,可以使用mint-ui中的swipe

HTML:

<Swipe :auto="4000">
  <SwipeItem v-for="item in slideitem">
    <img :src="item.img" alt="" @click="toUrl(item.link)">
  </SwipeItem>
</Swipe>
 
js:
import Swipe from "mint-ui/lib/swipe";
import SwipeItem from "mint-ui/lib/swipe-item";
export default {
  data(){
    return {
      slideitem:[]
    }
  },
  components: {
    Swipe,SwipeItem
  },
}
 
 
 css :
 
.mint-swipe {
overflow: hidden;
position: relative;
height: 2.8rem;
.mint-swipe-items-wrap {
position: relative;
overflow: hidden;
height: 100%;
}
.mint-swipe-items-wrap > div {
position: absolute;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
width: 100%;
height: 100%;
display: none
}
.mint-swipe-items-wrap > div.is-active {
display: block;
-webkit-transform: none;
transform: none;
}
.mint-swipe-indicators {
position: absolute;
bottom: .1rem;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.mint-swipe-indicator {
width: .4rem;
height: 6px;
display: inline-block;
border-radius: 3px;
background: #000;
opacity: 0.6;
margin: 0 3px;
}
.mint-swipe-indicator.is-active {
background: #fff;
}
}

vue --轮播图的更多相关文章

  1. vue轮播图插件vue-awesome-swiper的使用与组件化

    不管是APP还是移动端网页开发,轮播图在大部分项目当中都是存在的,这时候如果用vue开发项目,选择一款好的插件并且封装好是很重要的 1. 推荐使用vue-awesome-swiper 安装:cnpm ...

  2. vue轮播图

    vue开发中遇到这样一个需求实现导航栏和中间内容相结合实现页面滑动导航跟随改变的效果.看效果: 这里我用的是vue所带的插件:vue-awesome-swiper,传送门:https://www.np ...

  3. Vue轮播图插件---Vue-Awesome-Swiper

    轮播图插件 Vue-Awesome-Swiper 地址:https://github.com/surmon-china/vue-awesome-swiper 安装:npm install vue-aw ...

  4. 做一个vue轮播图组件

    根据huangyi老师的慕课网vue项目跟着做的,下面大概记录了下思路 1.轮播图的图 先不做轮播图逻辑部分,先把数据导进来,看看什么效果.在recommend组件新建一个recommends的数组, ...

  5. vue轮播图插件之vue-awesome-swiper

    移动端轮播图插件,在使用iview图形界面插件中的carousel组件无法实现触摸滑动后,转而使用vue-awesome-swiper插件 1.npm安装 npm i vue-awesome-swip ...

  6. vue轮播图实现

    1.先安装组件 cnpm install vue-awesome-swiper; 2.在main.js下引入文件: import VueAwsomeSwiper from 'vue-awesome-s ...

  7. vue 轮播图插件 vue-awesome-swiper

    1.npm安装 npm install vue-awesome-swiper --save 2.vue 引入 //在main.js 中全局引入 import VueAwesomeSwiper from ...

  8. vue轮播图中间大两头小

    <template> <div v-if="items.length" class="full-page-slide-wrapper"> ...

  9. vue music-抓取歌单列表数据(渲染轮播图)

    下载安装新依赖 babel-runtime:对es6语法进行转译 fastclick:对移动端进行点击300毫秒延迟 ,,取消掉 babel-polyfill:API 先添加,在npm install ...

随机推荐

  1. RBAC表

    --权限管理1 CREATE TABLE SystemLog--日志表 ( Id ,) PRIMARY KEY,--主键id UserName ) NOT NULL,--用户名称,创建日志的用户名称 ...

  2. 怎么转化为LPCWSTR

    wstring a = L"hello ,中国"; LPCWSTR b; b =(LPCWSTR) a.c_str(); RemoveDirectory(b); C++中L和_T( ...

  3. 怎么分辨是eclipse还是 android studio开发的

    eclipse开发的一般都会带.classpath文件.Android studio开发的一般都会有.gradle文件夹和build.gradle文件    

  4. SecureCRT连接linux,Hive中无法使用删除键

  5. 【Python爬虫实战】微信爬虫

    所谓微信爬虫,即自动获取微信的相关文章信息的一种爬虫.微信对我们的限制是很多的,所以我们需要采取一些手段解决这些限制主要包括伪装浏览器.使用代理IP等方式http://weixin.sogou.com ...

  6. 6.简单提取小红书app数据(简单初步试采集与分析)-1

    采集小红书数据爬虫:1.本来是要通过app端的接口去直接采集数据,但是app接口手机端设置本地代理这边开启抓包后就不能正常访问数据.所以就采用了微信小程序里的小红书app接口去采集数据. 2.通过 f ...

  7. 以虎嗅网4W+文章的文本挖掘为例,展现数据分析的一整套流程

    本文转自知乎 作者:苏格兰折耳喵 ----------------------------------------------------- 本文作者将结合自身经验,并以实际案例的形式进行呈现,涉及从 ...

  8. jquery小效果:新浪游戏右侧导航菜单 (页面效果)

    偷盗:新浪游戏右侧导航菜单 http://games.sina.com.cn 效果: 随着页面的滚动,左侧页面的内容,和右侧的导航菜单的按钮文字对应: 点击右侧的导航按钮,左侧页面滚动到相应的内容 2 ...

  9. Impala SQL 使用小记

    1.  impala端创建的表,DROP. hive会自动同步到. 但是通过hive DROP时,数据还会在,只是表的元数据没有了. 所以完全DROP表,需要impala端的DROP 2. impal ...

  10. 深入理解python with语句

    python的with语句相当于try.....finally,它是如何实现的呢?下面就结合范例和伪指令的实现来分析一下. with语句会汇编成:先调用with语句后面的表达式(open(...)), ...