- 博客(15)
- 收藏
- 关注
原创 js控制滚动条位置并添加过渡效果
js改变滚动条位置使用scrollTop属性// 网页可见区域高:document.body.clientHeight// 网页正文全文高:document.body.scrollHeight// 网页可见区域高(包括边框的高):document.body.offsetHeight// 网页被卷去的高:document.body.scrollTopdemo<!DOCTYPE html><html lang="en"><head> <meta
2022-04-04 13:19:59
2896
原创 render 函数渲染节点
@TOC快捷导航iview 表格中使用 render 函数渲染 jsx在 iview ui 或 element ui 中使用render函数渲染元素节点函数方式<template> <Table :columns="columns10" :data="data9"></Table></template>export default { data() { let columns10 = [ { type: '
2022-03-24 15:40:38
343
原创 vue简单实现Notify组件
使用vue简单实现vant的notify组件思路:使用基础 Vue 构造器,创建一个“子类”。参数是一个包含组件选项的对象。html<div id="notify"></div>notify.jsimport Vue from "vue"import "./notify.css"const Demo = Vue.extend({ props:['msg'], render(){ return ( <div class="show
2022-03-12 23:12:43
2184
原创 vue项目国际化(多语言)
记录一下笔记,以下vue项目案例使用vue-cli搭建 ;一.安装依赖1. 使用npm命令安装所需依赖vue-i18n , 此demo安装的版本为vue-i18n@8.24.2;# 安装命令npm i vue-i18n@8.24.22. 安装完成之后在入口文件先引入一下 , 检查是否安装成功;main.jsimport VueI18n from "vue-i18n"console.log(VueI18n); // 浏览器看到打印就表示安装成功啦3. 发现引入报错, 经测试可能是vu
2021-07-19 14:21:17
2926
2
原创 css实现ios开关
效果css.checkbox2::before { border-radius: 31px; width: 102px; height: 62px; background-color: #e9e9eb; outline: none;}.checkbox2 { border-radius: 31px; width: 102px; height: 62px; background-color: #e9e9eb; outline: none; position:
2020-08-21 17:04:06
254
原创 vue.js实现二级购物车的单选全选案例
实现购物车中带有分类或者店铺名的全选和反选 , 主要用到了watch监听案例效果截图代码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document&
2020-07-04 23:39:52
578
原创 css属性实现更流畅的滚动效果
关键属性 : -webkit-overflow-scrolling:touch;<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>滚动回弹</title> <style type="text
2020-06-09 22:09:17
1201
原创 js节流函数 + 过渡动画实现回到顶部效果
节流函数: 我理解的节流就是减少代码的执行频率,保证一段时间内只执行一次代码。一个返回顶部的案例<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document&.
2020-05-28 17:28:32
284
转载 ajax请求步骤 和 简易封装
ajax请求的五个步骤一. 原生中的ajax创建异步对象var xhr = new XMLHttpRequest();设置 请求行 open(请求方式,请求url)// get请求如果有参数就需要在url后面拼接参数,// post如果有参数,就在请求体中传递 xhr.open("get","validate.php?username="+name)xhr.open("post",...
2020-04-18 16:47:16
269
原创 js中的宏任务和微任务
首先我们要先知道一个事情 , js是单线程的 , 也就是说js干活的时候只有一个人就像我们人一样每天都有很多的任务 , 比如 做饭 上班 打卡 修电灯泡… , 这一堆的任务压在我们身上我们也会有主次之分 , 比如 先打卡 再上班js也是一样 , 它有一个任务队列 , 同一时间只能干一件事情任务执行的顺序 : 同步代码 > 微任务 > 宏任务顺序 : 先执行同步代码,遇到异...
2020-04-04 18:36:57
943
1
原创 vue自定义指令
在vue中除了默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令 , 一般用于对dom的底层操作下面一个小案例来介绍一下自定义指令先定义一个全局的自定义指令 v-color使用关键词directive定义全局指令参数一 : 自定义指令的名字参数二 : 一个大对象Vue.directive("color",{})每个自定义指令都有自己的钩子函...
2020-04-01 22:02:30
236
原创 React路由跳转和传参
React路由的跳转-传参和收参1. 安装react-router-domnpm install react-router-dom2. 在项目中使用react-router-dom首先在入口文件引入这个模块// 这里有BrowserRouter (历史记录) 和 HashRouter(hash) 两种模式import { BrowserRouter as Router} from...
2020-02-24 22:42:48
1197
原创 React入门 , 运行环境搭建
1.需要的工具Node.jsnpm2. 安装工具当我们在官网下载并安装Node时,npm也自动安装好了,疯狂next即可。安装完成后终端分别输入 node -v 和 npm -v 看到版本号即可,如图因为使用npm很慢,我们可以设置使用国内的的淘宝镜像npm config set registry https://registry.npm.taobao.org ...
2020-02-23 17:39:38
295
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人