vue仿PC端163music图片滚动组件

2024-05-27 00:25:08

介绍

这是一款模仿PC端网易云音乐的vue图片滚动插件

http://blog.shanamaid.top/2017/03/03/vue%E4%BB%BFPC%E7%AB%AF163music%E5%9B%BE%E7%89%87%E6%BB%9A%E5%8A%A8%E7%BB%84%E4%BB%B6/

Github项目地址-vue-image-scroll

在线文档和demo

欢迎各位dalao指点,star or PR!

安装与使用

安装

1	npm install vue-image-scroll

使用

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

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

本地调试

1

2

3

4

5

git clone https://github.com/ShanaMaid/vue-image-scroll.git

npm install

npm run dev

说明

项目使用vue-cli开发，源文件在src/components/Slider.vue中，lib中的index.js为压缩后的文件

开发遇到的问题

打包组件的时候遇到,loader error的问题，发现webpack2.0开始loaders中babel以及url等都需要写作babel-loader、url-loader

vue仿PC端163music图片滚动组件相关推荐

vue 调用pc端本地摄像头、麦克风实现拍照、录视频、录音并上传到服务器指定树文件夹
vue 调用pc端本地摄像头.麦克风实现拍照.录视频.录音并上传自己写blog只是为了下次方便使用过程确实很烦 ,自己摸索加各大网站cv查看可以直接使用 1.调用摄像头拍照录屏首先是npm ...
html5地区级联选择,【JS】vue+vant移动端地区级联选择组件
首页专栏 javascript 文章详情 0 vue+vant移动端地区级联选择组件 quanta发布于今天 08:25 写在开头:项目的框架是vue+vant,业务需求一个级联的地区选择,写完才 ...
Android 调用12306接口,GitHub - AndroidyxChen/loading-12306: 仿PC端12306的刷新loading的自定义view...
loading-12306 仿PC端12306的刷新loading的自定义view 效果图: 核心代码及实现逻辑如下: mPaint.setColor(mColor); mPaint.setTextS ...
vue适配PC端屏幕自适应
vue适配PC端屏幕自适应 1.下载postcss-px2rem和px2rem-loader npm i postcss-px2rem px2rem-loader 2.src目录下新建utils文件夹 ...
基于Springboot和VUE的聊天项目，仿PC端微信
项目介绍仿PC微言聊天室是基于前后端分离,采用SpringBoot+Vue框架开发的网页版聊天室. 使用了Spring Security安全框架进行密码的加密存储和登录登出等逻辑的处理,以WebSo ...
vue实现PC端调用摄像头拍照人脸录入、移动端调用手机前置摄像头人脸录入、及图片旋转矫正、压缩上传base64格式/文件格式
PC端调用摄像头拍照上传base64格式到后台,这个没什么花里胡哨的骚操作,直接看代码 (canvas + video) <template><div><!--开启摄像头 ...
vue的pc端适配vw vh rem
安装命令: npm i postcss-px-to-viewport@1.1.1npm i postcss-pxtorem@5.1.1 2.安装完之后在根目录新建postcss.config.js(和 ...
基于SpringBoot+VUE（PC端+小程序端）的智能在线考试系统毕业设计
作者主页:编程千纸鹤作者简介:Java.前端.Python开发多年,做过高程,项目经理,架构师主要内容:Java项目开发.毕业设计开发.面试技术整理.最新技术分享收藏点赞不迷路关注作者有好处 ...
vue构建pc端项目（ElementUI）、vue入门小应用
Webpack+Vue-router的架构方式 Vue-cli安装省略(vue-cli搭建) ElementUI库(pc端)的引用(见下文) 打包(项目完成后打包放服务器) 在项目目录下运行 npm ...

最新文章

热门文章