自上一篇文章首次接触到脚手架工具（一种包含多项前端技术所构成的项目生成器）这也是我所写的第一个Vue组件，想把整个项目的全过程分享给大家。首先在路径终端下使用命令vue create lunbotu创建工程。使用npm run serve命令创建出一个localhost服务器，用于实时查看页面接下来就正式开始工程的创建了，如图是我的工程目录：src目录下主要存放了我开发过程中的所有代码以及资源sr
每次项目使用轮播的时候都是直接用swiper，实话实说，功能强大，简单。但是想想自己每次都使用最基本的，于是就自己捣鼓了一个。先说一下无缝滚动原理吧：原本是在想有没有什么好办法可以不复制节点，后来写了一些动画发现没办法做到，于是也是采用了复制前后节点的方法。如上图，在第一个复制一个最后一个的节点，最后一个加上第一个的节点。当滚动到最后一个的时候，继续往下滚动到复制的节点，然后在下一次滚动之前判断，
最近公司要我去实现vue知识的系统讲解，总结一番，大致需要7节课，今天大致说一下我们使用vue需要学会的基本技能。vue是一个渐进性视图渲染框架，使用vue核心是数据出发，数据一般是我们前台从后台获取数据，对应显示到我们的页面上就可以。使用vue基本工具必备，node, FQ的工具蓝灯（如果没有的同学可以找我，给你安装包），vue-cli，这是最基本的使用工具，如果您是后台开发人员，那么我推荐使用
前言better-scroll是一个非常非常强大的第三方库 在移动端利用这个库 不仅可以实现一个非常类似原生ScrollView的效果 也可以实现一个轮播图的效果 这里就先记录一下自己实现这个效果的一些过程吧思路1.首先要确定自己的HTML结构 基本结构就是一个wrapper包含一个content2.其次需要明白的一个页面可以滚动的原理在于 当内容的高度超出了容器的高度才可以实现滚动 如果没有超出
转载
2024-08-19 23:39:57
360阅读
这段时间，一直在学习些源码，想了解下大佬的思路，看完后，只能说卧槽，还有这种操作。element-ui一个Vue常用的组件库，包含很多的知识点可以学习，其很多组件只是样式的变化。难度比较大的，轮播算一个。今天就给大家简单实现下它的一系列操作。首先它分为两个组件，一个是父组件（容器），另一个是子组件（幻灯片），首先容器是固定一个窗口，让对应的幻灯片显示。
我们先来写好它的模版。
父组件
转载
2024-04-26 08:39:12
2423阅读
我不得不吐槽一下，我的js水平，真的是烂。哎，学吧。前几天写了一个关于竖向轮播的功能，链接如下：实现两个公告同屏滚动轮播(elementUi-走马灯效果实现)效果如下： 代码如下：<el-carousel height="26px" direction="vertical" indicator-position="none" :autoplay="autoplay">
<
转载
2024-04-24 16:41:27
101阅读
在本篇博客中，我们将使用Vue来实现一个简单的轮播图组件。我们将利用Vue的生命周期钩子、数据绑定和计算属性等特性来完成这个功能。准备工作首先，我们需要创建一个Vue组件，用于展示轮播图。在这个例子中，我们将创建一个名为Carousel的组件。模板我们首先来定义组件的模板，即HTML结构。我们将使用一个ul元素来包含轮播图的图片，以及一个指示器来显示当前显示的图片。<template>
转载
2024-04-14 15:51:43
674阅读
一、vue的Element组件库官网：https://element.eleme.cn/#/zh-CN1.1安装推荐安装方法： 首先要进入项目目录cnpm i element-ui -S
或
npm i element-ui -S1.1.2 CDN安装直接引入无需安装：<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpk
转载
2024-03-27 14:02:39
1580阅读
实现登录页面与注册页面基本一致，需要新建 Login.vue一、基于嵌套路由实现点击底部导航后页面内容的切换业务设计嵌套路由：http://localhost:8080/home/index 看到home中嵌套"首页"内容http://localhost:8080/home/me 看到home中嵌套"我的"内容由上述设计可得：1. HomeView.vue 文件中只保留底部选项卡。上半部分需要提供
文章目录? 前言? 一、效果演示? 二、实现思路? 三、实现案例往期内容 ? ? 前言在 Vue + elementUi 开发中，遇到这么一个需求，要实现公告轮播的效果。说实话，一开始是打算通过Javascript去获取并修改对应元素来控制轮播的，但是发现这样子代码比较多，而且性能不是很好。然后…聪明的小温想到了，能不能通过vue的动画过渡，实现公告的滚动效果呢！ 一不做二不休，直接上手，果然是
转载
2024-04-29 19:04:38
1454阅读
不论是app，还是网站，基本上都会出现轮播图，今天和大家分享几种不同工具实现轮播图的几种方式。 轮播图的基本样式和功能就不需要解释了，相信能根据题目选择看文章的话都知道啥是轮播图，如果哪位读者老爷真的让非要我解释一下啥是轮播图，求您饶了在下吧，真心词穷~ 为了方便大家观看，我把css，html，js都写在一个文件里。 swiper插件实现轮播图 swiper是一个实现轮播图很强大，上手也容易。并
转载
2024-10-15 16:47:23
61阅读
昨日回顾# 1 封装日志
# 咱们用的方案
django--->原生日志--->配置文件copy过来--->写一个py文件，在py文件中拿到配置文件中定义的django日志对象，以后导入使用即可
# sentry：集中式管理
# python 第三方日志库
-logru
# 以后不要在代码中print，使用日志输出
#
转载
2024-09-30 22:03:32
105阅读
昵
图网在这里插入图片描述compoment<template>
<div class="block" >
<el-carousel :interval=6000 :autoplay="true" height="482px">
<el-carousel-item v-for="(item,index) in arrayList" :
Element源码系列——Form、Form-item组件 Element源码系列——Form、Form-item组件序言控件组成数据收集校验数据提交数据总结 序言Element团队将组件主要分为Basic、Form、Data、Notice、Navigation、Others几大类.如果您跟我一样学习到Form大类的时候,先看Form组件绝对没有错.在看代码之前还是一样，我们先整理下咱们要做什么?
转载
2024-03-28 13:25:59
390阅读
轮播图初识轮播图，图片旋转器，滑片，无论你怎么叫这玩意，它在网络上无处不在。轮播图在电商网站主页上广泛应用，大多数电商网站的主页上都有它的身影~ 前端玩家轮播图那必然是当家技能~ 首先面对需求，我们需要了解轮播图应实现的功能： 基本功能● 自动无缝滚动 ● 左右按钮控制滚动 ● 点击圆点切换图片成品案列 鼠标未触及区域时（自动滚动中） 鼠标触及区域后 （停止滚动，显示按钮） 整体构想及思路（1）
转载
2024-10-19 18:22:53
52阅读
目录关于template外壳：关于图片的自动切换的处理： 为什么要把第一张图片外的 li 克隆一份放到 li 列表的最后：函数节流处理 ：关于template外壳：div，用于内容的呈现，溢出的内容设置为隐藏；div下创建一个内外边距都为0px的ul，ul的高与div一致，宽为（所要展现图片数+1）* （div的宽），（注：加1是因为将克隆第一张图片并放到最后，完
写在前面每一篇文章都希望您有所收获，每一篇文章都希望您能静下心来浏览、阅读。每一篇文章都是作者精心打磨的作品。如果您觉得杨戬这个小白还有点东西的话，杨戬希望正在看文章的您可以帮忙点亮那个点赞的按钮(效果更加)，对于杨戬这个暖男来说，真的真的非常重要，这将是我持续写作的动力。前言写这篇文章的目的主要是将以前所学的知识结合起来，进一步巩固一下自己的记忆，防止遗忘(主要是害怕老年痴呆)，当然更重要的是学
转载
2024-05-16 06:56:09
0阅读
图片轮播是种很常见的场景和功能，一般移动网站首页的轮播 banner，商品闲情页的商品图片等位置都会用到此功能像这种常用的场景功能肯定是有人早就写好插件了的，所以遇到这种场景，一般都遵循以下三步：打开冰箱 启动 Github搜索 swiper、slider、Album等关键字找到想要的库，npm install之这种做法没毛病，有现成的轮子可用当然拿来主义，因为项目用的是 vue，所以我在网上找了
转载
2024-03-01 21:48:41
117阅读
最近在写一个基于vue2.0的移动端音乐项目，昨天写到 了首页的轮播图部分，跟着视频教程写的，没想到最后却出现了一大堆错误，并且都是视频中所没有的，自己思考了很久，也不知道是怎么回事，今天早上开机之后，百度发现，原来是better-scroll的版本为题，视频中用的是老版本"better-scroll": "^0.1.15"，而 我npm安装的是新版本"better-scroll": "^1.15
最近在使用echarts雷达图的时候有一些新得想分享一下，话不多说直接看代码var option=
{
//title: { text:null }, // 隐藏图表标题
legend: {
show: true,
top:0,
