vue-image-scroll
一个模仿网易云音乐的 vue 图片滚动插件
安装
npm install vue-image-scroll
使用方法
<template>
<div>
<slider v-bind="setting">
</div>
</template>
<script>
import slider from 'vue-image-scroll';
export default {
components: {
slider
},
data: function() {
return {
setting: {
image: ['1.jpg', '2.jpg', '3.jpg']
}
}
}
}
</script>
默认值
{
styleObject:{
width: '750',
height: '250'
}, //滚动框样式 宽度默认750px 高度默认250px 其余样式小驼峰命名
background-color => backgroundColor
image: null, //图片数组
interval:2000, //滚动间隔,单位ms,默认2000
imgStyle:null,//图片样式，宽度和高度不可设置，样式名字小驼峰命名
autoRoll:true, //自动滚动
direction:left //滚动方向, left or right
}
示例
-
vuescroll 官网：https://vuescrolljs.yvescoding.org/zh/guide/configuration.html#detectresize 主要配置如下 在data里面： ops: { vuescroll: { mode: "native", //模式:pc natice 移动端是slice sizeS
-
文章链接：https://mp.weixin.qq.com/s/OO7jVd2kIlkRtNNaRjGLuQ 插件 方便复用，封装成一个插件： // lazy.js export const lazyPlugin = { install (app, options = {}) { const lazy = new Lazy(options) app.dir
-
vue-image-scroll 详细介绍 vue-image-scroll 一个模仿网易云音乐的 vue 图片滚动插件 安装 npm install vue-image-scroll 使用方法 <template> <div> <slider v-bind="setting"> </div> </template> <script
-
vue下拉数据无限加载 - vue-infinite-scroll vue图片懒加载功能 - vue-lazyload css: #app{ width: 300px; height: 500px; } .item{ width: 100%; height: 100px; } .item img{ width: 50px;
-
1.html <div class="container"> <!--左右滑动--推荐用户--> <div class="slide-box" ref="user"> <div class="slide-item" v-for="user in shareData.users"> <div @click="goUserPage(user.id
-
<template> <view class="box"> <scroll-view scroll-x="true"> <block v-for="(item, index) in dataList" :key="index"> <view class="dayTitle" :class="current == index ? 'select' : ''" @click="Se
-
地址 v-viewer 点击图片放大 vue-seamless-scroll 无缝滚动 遇到的问题 v-viewer 点击图片无法响应事件 解决: 使用事件委托 GotoImage() <client-only> <scroll-seamless :data="list" :class="ScrollClass" :class-optio
-
安装 npm||cnpm install vue-seamless-scroll --save 或 yarn add vue-seamless-scroll 或 <!-- https://cdn.jsdelivr.net/npm/vue-seamless-scroll@latest/dist/vue-seamless-scroll.min.js --> <script src="vue-seaml
-
main.ts // @ts-ignore import scroll from "vue-seamless-scroll/src"; app.use(scroll) 引用 <template> <div class="give_an_alarm"> <div class="level_title"> <div class="top_level"></div>
-
本文向大家介绍详解 vue better-scroll滚动插件排坑，包括了详解 vue better-scroll滚动插件排坑的使用技巧和注意事项，需要的朋友参考一下 BetterScroll号称目前最好用的移动端滚动插件，因此它的强大之处肯定是存在的。要不...哈哈。个人感觉还是很好用的。这篇文章不是笼统的讲 BetterScroll ，而是单讲滚动，想要深入了解它，请移步这里 。 滚动原理 b
-
本文向大家介绍vue的无缝滚动组件vue-seamless-scroll实例，包括了vue的无缝滚动组件vue-seamless-scroll实例的使用技巧和注意事项，需要的朋友参考一下 Installation NPM Usage ES6 以下es6用法需要webpack环境编译. 普通模式 (script tag) Example: Configure TKS vue-seamless-scr
-
最喜欢的在线音乐播放器了, 之前没有linux版本，只能通过 wine 来安装，后来网易终于出了 linux 版本，开心 :) 下载 网易云音乐的下载地址： http://music.163.com/download 选择 “Linux版”，在弹出窗口列出的多个版本中，选择”ubuntu 16.04 64位” 版本下载。 安装 直接用 GDebi package installer 安装即可，感谢
-
- 实现css 父容器 里面两个子元素，左边的元素固定宽度，右边自适应，而且右边要水平滚动 - align-content align-items的意思和有哪些属性 - justify-content的意思和有哪些属性 - 手写 res = [1,2,3,4,5] => [[1,2],[3,4],[5]] - git stash git reset git revert - 介绍promise -
-
全程没开摄像头，很不耐烦，应该是kpi面 1、三道代码输出 2、css动画有做过吗 3、vue2和vue3区别 4、生命周期说下 5、各个生命周期都是干什么的，想从后端拿到一个列表数组在哪个生命周期 6、dom事件流 7、事件捕获和事件冒泡，怎么改方式，从哪一级开始捕获 8、事件代理，是谁代理 9、怎么学习前端的，最近有什么收获 反问： 问：业务？ 答：网易云音乐社交场景 问：技术栈？ 答：rea
-
网易音乐事业部 内容运营 时间线： 6.1投递简历——6.2一面——6.5面试通过/口头offer——6.7邮件offer 一面（20min） 1.自我介绍； 2.之前没有音乐方面的经历为什么想要投网易云音乐呢？ 3.深挖简历上的经历； 4.介绍一下运营个人账号的用户画像，根据什么得出这个画像的？ 5.平时喜欢听的音乐风格； 6.介绍一个喜欢的音乐人/歌手，如果让你为这个小众音乐人写一段宣传推广文