- 博客(27)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 前端基础之滚动显示
这里用到了jquery的animate动画，核心代码，元素动画上移后把第一个追加到最后一个。因为使用的滚动条，当文本到底后滚动条也就到底了，所以我们需要先把文本拼接长，两倍即可。首先获取ul元素，然后定时任务进行自增scrollTop的值，实现文本滚动效果。这样滚动到到二倍长度就会停止不动了，所以我们需要把scrollTop置0。代码还有需要优化，当文本不超过容器高度的时候也会进行滚动，需要增加一个判断。scrollTop：滑动滚动条，使用定时任务改变滚动条的值进行动态滚动。scroll：一圈一圈的走。
2023-08-24 15:37:39
842
原创 VUE-基础八-路由
路由安装与配置npm安装依赖npm install vue-router@4新建文件夹router然后在文件夹中新增index.js路由的配置文件import {createRouter,createWebHashHistory } from 'vue-router'// 1. 定义路由组件.// 也可以从其他文件导入import Home from "../view/Home";import About from "../view/About";// 2. 定义一些路
2021-08-19 11:52:13
214
原创 VUE-基础八-生命周期
Vue3.0生命周期图片示例按顺序依次是:组件创建调用beforeCreate 实例创建时调用created 实例创建完成调用beforeMount 模板编译之前自动调用mounted 模板编译完成调用组件更新调用:beforeUpdate 模板更新之前调用updated 模板更新完成调用组件销毁调用beforeUnmount 实例销毁之前调用unmounted 实例销毁完成调用组件缓存调用只有用keep-alive包裹的组件
2021-08-12 13:57:59
318
原创 VUE-基础七-Slot插槽
V-slot缩写：#预期：可放置在函数参数位置的 JavaScript 表达式 (在支持的环境下可使用解构)。可选，即只需要在为插槽传入 prop 的时候使用。参数：插槽名 (可选，默认值是 default)插槽的使用声明一个插槽组件在html里面使用slot标签。<template> <h1>this is slotcomp start </h1> <slot></slot> <h1>this is
2021-08-11 13:53:53
222
原创 VUE-基础六-父子组件
父子组件引用声明一个子组件<template> <h1>this is ChildrenComp</h1></template><script>export default { name: "ChildrenComp"}</script><style scoped></style>然后在父组件中引入该组件import ChildrenComp from "./compon
2021-08-10 21:20:04
109
原创 VUE-基础五-基础练习
基础练习做一个购物车示例如下：一、添加表格结构样式及数据<div> <table> <tr> <td></td> <td>书本id</td> <td>书本名称</td> <td>书本价格</td> <td>操作</td> </tr&
2021-08-10 14:37:12
113
原创 VUE-基础三 - 事件监听
在前端开发中经常和用户交互就需要用到事件监听。vue的监听命令是v-on，简写为@点击事件<button v-on:click="sub">-</button><input type="text" size="2" v-model="num"><button @click="add($event)">+</button>js编写add(e){ console.log(e); this.num++;
2021-08-09 13:16:12
269
原创 VUE-基础二 -V-bind与计算属性
V-bind计算属性：computed示例一假如title是name和slogen合并而成的，首先在data里面声明另个属性。name:'标题前缀 ',slogen:'标题后缀'然后在计算属性中进行拼接如下：computed:{ title:{ get(){ console.log('computed log'); return this.name+this.slogen; } } }然后在html中使用多次。
2021-08-09 12:28:37
457
原创 angular 实现文件下载
<button nz-button nzType="default" (click)="downTemplate()"> <i nz-icon nzType="download"></i>下载模板 </button>downTemplate=()=>{ const params = {}; // body的参数 this.httpClient.post('/file/down/template?type=3', ...
2021-08-08 16:04:49
2066
原创 Angular-ng-zorro ZTree组件实现
异步加载及拖拽实现异步加载实现可以如下代码(zorro官网拷贝)，异步加载数据import { Component } from '@angular/core';import { NzFormatEmitEvent, NzTreeNodeOptions } from 'ng-zorro-antd/core';@Component({ selector: 'nz-demo-tree-dynamic', template: ` <nz-tree [nzData]="nodes"
2020-12-13 17:26:11
586
1
原创 angular 单击和双击事件分开
需求：表格单击选中，双击显示修改，所以需要在行数据上面添加单击与双击。这时候就要区分开了。环境：angualr、ng-zerro实现：双击的时候肯定会先触发单击，所以我们进行单击拦截。这里拦截使用定时器拦截，如果触发双击则进行定时器清除。不然就实现单击逻辑。创建单击及双击事件，如下所示：<tr *ngFor="let data of rowSelectionTable.data" (click)="clickItem(data.columnId)" (dblclick)=
2020-11-19 17:55:01
2552
原创 angular blob使用请求下载文件
需求：我需要模拟点击下载文件，因为后台会返回两种数据。1、blob 里面是excel(流)2、blob里面是json(流)，如果生成文件异常的话思考：1、区分返回的数据类型2、分别进行流读取实现：区分返回的类型因为我后台返回json流的时候，会设置请求头是json格式。所以就可以跟正常的文件下载流区分开。根据响应头区分。resp.type == 'application/json'代码实现后续功能常规的绑定点击事件<button nz-butto
2020-11-18 16:19:53
1001
原创 angualr 上传文件
一、代码信息https://ng.ant.design/version/8.5.x/components/upload/zh这边选择自定义选择，样式代码如下import { HttpClient, HttpEvent, HttpEventType, HttpRequest, HttpResponse } from '@angular/common/http';import { Component } from '@angular/core';import { UploadXHRArgs
2020-11-18 11:33:32
335
原创 Angular 8 学习(一) —— 环境搭建
一、node下载地址：https://nodejs.org/zh-cn/建议下载稳定版本。二、Angular Cli 安装三、开发工具Vscode建议扩展插件四、谷歌浏览器插件建议...
2020-09-30 10:04:50
114
原创 Angular学习之轮播图组件
首先创建轮播组件ng g c components/imageSlider然后在index.js中配置导出。
2020-04-25 22:52:50
2410
2
原创 封装第一个组件
ng生成组件的命令：ng generate component 组件名（驼峰形式）简写：ng g c 组件名（驼峰形式）生成第一个组件：ng g c ScrollableTab移动到公共的目录下拷贝上一篇文章的组件内容。然后在根组件：app.component.html中引入该组件<app-scrollable-tab></app-scrol...
2020-04-16 15:43:39
179
原创 初识顶部TabBar
修改html文件，进行遍历取值展示为tab<ul> <li *ngFor="let item of tabs" > <a href="#">{{ item }}</a> </li></ul>导出的类里面声明数组，供上面遍历export class AppComponent { t...
2020-04-16 15:06:32
302
原创 Angular 8 学习(二) —— Cli工程结构
一、创建新工程执行命令：ng new pinduoduo或ng new pinduoduo --skip-install --style css --routing false二、项目介绍2.1 使用vscode打开项目然后在终端执行 ng serve日志提示打开该链接，打开后如下图所示：...
2020-04-16 11:19:51
151
原创 上下左右控制div切换选择
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title></title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script...
2019-08-22 21:22:34
960
原创 CSDN第一篇，begin~
2017年8月21日第一、学历：中专第二、英语水平：理论上学了2年，实际学了一个月就放弃了。从小到大英语0经验第三、数学水平：理论上中专学历，实际初三没毕业第四、语文水平：初三没毕业导致多数汉字认不全，语言表达缺陷很大，理解东西比较有缺陷第五、个人缺陷：因为性格内向，见外人说不出话，特别是见女的。至今25岁初恋依在第六、兴趣爱好：看书、看书、看书、听歌、听歌、听歌第七、...
2019-06-21 14:34:05
131
1
原创 HTML之表格篇-表格嵌套表格
嵌套表格一：效果如图所示代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> tabl
2018-12-09 23:49:36
8448
4
原创 JQ校验参数框架——Validate
jQuery ValidatejQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息，且已翻译成其他 37 种语言。该插件是由 Jörn Zaefferer ...
2018-09-11 18:55:07
1606
原创 CSS——弹性盒子Flex
刚接触Flex三天，特总结并记录一下。Flex感觉就是排版布局的神器。（好吧刚接触前端，原谅我一次孤陋寡闻）参考文章：CSS3中弹性盒子Flex使用详解 Flex 布局教程：语法篇Flex 弹性盒子要使用flex布局，需要设计到两层，外面一层叫做Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（fle
2018-01-08 10:08:18
265
原创 移动端——前端页面编写总结
练习一：百度首页编写 小结： 1.不要用空格分割元素，浏览器或者手机空格大小不一致 2.css，js事件用动态绑定的方式，不要写在行内样式中。防止其它人添加样式被覆盖 3.少用p标签，浏览器不支持。 4.css样式从后往前找。知道怎么回事，但是还是没有理解怎么优化 5.颜色用16进制，字母机器识别不
2018-01-05 10:56:58
2266
原创 Css三大特性
继承性 1）子元素可以继承父元素的样式（标签之间属于一种嵌套关系）层叠性 1），给一个标签设置的样式发生冲突的时候即样式的覆盖 2），浏览器的渲染机制是从上到下的，当有冲突的时候就采用最后的那个样式优先级 ！important >行内样式 >id选择器 >类选择器 >标签选择器 >通配符 >继承权重会叠加 1. 内联样
2018-01-05 09:23:57
159
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人