- 博客(19)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 vue自定义懒加载指令
vue自定义懒加载指令一、介绍二、自定义指令三、使用方法四、实现效果一、介绍懒加载(Load On Demand)——也称为延迟加载,它能够在用户滚动页面的时候自动获取更多的数据,而新得到的数据不会影响原有数据的显示,同时最大程度上减少服务器端的资源耗用。其关键就是，在图片没有进入可视区域时，先不给的src赋值，这样浏览器就不会发送请求了，等到图片进入可视区域再给src赋值。二、自定义指令vue3.0写法1、安装插件yarn add @vueuse/core -S2、创建lazy-image.
2021-09-03 16:42:33
455
原创 vue实现瀑布流效果
vue实现瀑布流效果一、介绍二、布局原理三、具体实现四、实现效果一、介绍瀑布流，又称为瀑布流布局。是比较流行的一种网页展示形式，在视觉上表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。即多行等宽元素排列，后面的元素依次添加到其后，等宽不等高，根据图片原比例缩放直至宽度达到我们的要求，依次按照规则放入指定位置。二、布局原理等宽不等高的图片排列，从第二行开始，图片插入的位置根据上一行插入图片得最低处依次插入，最终形成参差不齐的布局效果。三、具体实现这里是
2021-09-03 15:56:45
2840
原创 实现预览图片上下滑动关闭效果
实现预览图片上下滑动关闭效果一、页面结构二、触摸事件概述三、功能实现实现效果今天的项目任务中实现一个瀑布流，点击图片可以实现图片预览、左右切换效果。说干就干，下班时，提交完代码准备溜时，提出一个新需求，在预览图片时添加一个上下滑动取消预览的效果，唉，加吧，我爱加班。这里主要记录一下实现该功能的关键步骤，如下：一、页面结构以下是页面结构内容，css样式及组件内容不在此赘述<template> <div> <halo-dialog class="preview
2021-08-27 16:06:19
577
原创 图像裁剪器 Cropperjs
图像裁剪器 Cropperjs1、插件安装2、引入3、代码实现4、效果图5、常用参数options5、常用方法6 、结尾近日前端项目中，需要实现上传图片、支持自定义裁剪，生成海报的功能。该项目采用Taro(react语法)实现。具体实现步骤如下：1、插件安装yarn add cropperjs -S 2、引入在项目中引入cropperjs，一定不要忘记引入样式import Cropper from "cropperjs"import "cropperjs/dist/cropper.css"
2021-08-17 18:13:37
715
原创 node抓取豆瓣数据
node抓取豆瓣数据1、准备工作2、安装依赖3、实现代码4、结果实现1、准备工作1）安装node：node下载链接.2）创建项目：使用Express创建项目.2、安装依赖使用npm install（cnpm install、yarn等）安装依赖3、实现代码创建一个movie.js文件，输入以下代码：const fs = require('fs')const axios = require('axios')const cheerio = require('cheerio') // 抓取页面
2021-05-17 11:46:09
185
原创 git 常用命令
git 常用命令1、删除远程库2、分支管理查看分支创建分支切换分支创建并切换分支查看提交历史bug分支将指定的提交应用到其他分支查看工作区的状态3、版本回退4、撤销修改5、删除文件6、多人协作的工作模式7、区别理解1、删除远程库使用命令git remote rm name (解除了本地与远程的绑定关系，并不是物理上删除了远程库)使用前建议使用 git remote -v 查看远程库信息2、分支管理查看分支使用命令git branch 可以查看所有分支，当前分支前面会有(*)，操作如下：$ gi
2021-05-14 17:35:47
218
原创 跨域之JSONP
跨域解决方案之JSONP什么是jsonp什么是同源策略jsonp的原理jsonp的实现方式jsonp为什么不支持POST？什么是jsonpJsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。为什么我们从其它网站获取数据需要通过jsonp技术来获取呢？那是因为同源策略。什么是同源策略同源策略，它是由 Ne...
2019-09-22 19:39:32
281
原创 PHP+Bootstrap+原生Ajax+MySQL实现前后端交互（下）——实现分页效果
jQuery实现分页效果思路动态创建页码切换功能分页效果的核心实现效果思路通过总数据的条数/每一页显示的条数，并向上取整，就可以得到页码数，并动态添加到ul中。动态创建页码//每一页显示的信息数 this.num=2; //当前页面的索引 this.index=0; //找到容器ul this.oul=document.queryS...
2019-09-21 12:19:36
2274
37
原创 PHP+Bootstrap+原生Ajax+MySQL实现前后端交互（中）
前后端交互项目修改功能思路修改功能的js代码修改功能的PHP代码实现效果删除功能思路实现删除功能的js代码实现删除功能的PHP代码实现效果在上个文章中介绍了如何使用bootstrap进行布局，使用PHP操作数据库，通过ajax实现数据的查询和添加功能，在这篇文章中，继续实现ajax交互项目的修改和删除操作。修改功能思路通过点击页面上的修改按钮，将会弹出模态框，并将这一行的信息对应显示在模态...
2019-09-21 11:53:12
1416
原创 PHP+Bootstrap+原生Ajax+MySQL实现前后端交互（上）
前后端交互简介实现布局Bootstrap布局代码MySQL数据库实现查询功能添加记录修改记录删除记录简介本案例使用Bootstrap进行响应式布局，通过PHP以及MySQL实现前后端交互，使用Ajax技术实现页面的无刷新加载。实现布局布局采用前端框架Bootstrap实现响应式布局，快速、高效。注：使用Bootstrap布局，需注意，Bootstrap是依赖于JQuery之上的，所以需...
2019-09-21 11:27:47
3997
3
原创 轮播图
轮播图布局实现入口函数小圆点切换实现上一张按钮下一张按钮创建定时器布局利用jQuery实现小米轮播图效果。实现该效果由三部分组成：图片、切换上一张和下一张按钮以及图片下方小圆点。在实现过程中，添加了定时器，开始时，图片自动的从右到左切换，底下的小圆点也在相对于的切换，点击上一张或者下一张按钮的时候，图片和小圆点也在对于的切换。布局与样式代码如下：HTML<body> ...
2019-09-13 21:22:38
451
原创 js中数组与字符的方法
js中数组与字符的方法Array对象数组属性Array对象方法(常用的)ES5新增的数组方法字符方法常见的字符方法Array对象Array对象用于在变量中存储多个值：var arr=[“abc”,“name”,“user”];数组元素的索引从0开始，到数组的长度-1结束。数组属性属性描述constructor返回创建数组对象的原型函数length设置或返回...
2019-09-07 18:00:58
195
原创 JS笔记
JS笔记js的组成BOMwindow身上的方法window下的子对象DOM选择器js的组成js由ECMAScript(语法标准)、DOM(网页)、BOM(浏览器)三部分组成BOMBOM是js中的顶层对象，所有的全局都属于window。BOM和DOM和ECMAScript的关系:BOM是运行平台，BOM规则建立在ECMAScript的规则之上；DOM是运行在平台上的页面；ECMAS...
2019-08-30 19:07:22
161
原创 this指向
this指向this执行的位置bind()、call()和apply()的关系this：执行上下文，this一般存在于函数中，表示当前函数的执行上下文，如果函数没有执行，那么this没有内容，只有函数在执行后this才有绑定。this执行的位置默认执行：this指向window,严格模式指向undefined非严格模式下 function fn(){ console....
2019-08-29 19:16:07
171
原创 vue.js简介
vue.js简介什么是vue.jsvue.js的模板语法vue.js的一些语句介绍条件语句循环语句vue.js的计算属性注什么是vue.jsVue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。Vue 只关注视图层， 采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。vue.js的模板语法vue.js...
2019-08-22 21:19:30
379
原创 正则表达式的介绍及常用方法
文章目录正则表达式介绍正则表达式语法正则表达式的知识点正则表达式的量词正则表达式中的转义正则表达式中的一些表示使用正则表达式去除字符串中的空格正则表达式的方法正则表达式正则表达式介绍正则表达式(regular expression)描述了一种字符串匹配的模式（pattern），可以用来检查一个串是否含有某种子串、将匹配的子串替换或者从某个串中取出符合某个条件的子串等。构造正则表达式的方法和...
2019-08-22 18:01:48
568
原创 原生JS实现省市县三级联动
文章目录介绍思路实现页面初始化效果编写JS文件area.jsmain.js注意介绍做页面开发或客户端程序开发，都会碰到几个下拉菜单联动的情况，例如在网上买东西的时候，就会选择收货地址，以及在填写家庭信息的时候，都会用到常见的省，市，区三级联动。思路页面加载的时候显示的是默认的初始省市县，通过选择不同的省和市，则该省对应的市和县显示为默认。当点击省份列表中的某一项，此时触发省份下拉框的on...
2019-08-22 16:16:03
5370
原创 jQuery实现tab选项卡切换
文章目录项目效果项目<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>07-tab选项卡</title> <style> *{ margin: 0; ...
2019-06-16 19:41:27
1433
3
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人