前端
关注
分享
扫一扫
想成为工程师的菜鸟
学的不仅是技术，更是梦想！
展开
-
小程序图片拖拽排序
微信小程序图片拖拽排序原创 2022-09-08 16:28:19 · 381 阅读 · 1 评论 -
调研问卷实现的思路
调研问卷原创 2022-07-22 15:27:51 · 230 阅读 · 0 评论 -
手机浏览器页面如何调试，使用vconsole插件
手机浏览器页面如何调试，使用vconsole插件<script src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"></script><script> let vConsole = new VConsole();</script>原创 2022-03-14 10:42:06 · 811 阅读 · 0 评论 -
vuex 是什么？怎么使用？哪种功能场景使用它？
vuex 是什么？怎么使用？哪种功能场景使用它？是什么？只用来读取的状态集中放在store中；改变状态的方式是提交mutation，这是个同步的事物；异步逻辑应该封装在action中。怎么使用？在main.js引入store，注入。新建了一个目录store，然后…… export 。场景有：单页应用中，组件之间的状态、音乐播放、登录状态、加入购物车state：vuex 使用单一状态树，即每个应用将仅仅包含一个store实例，但单一状态树和模块化并不冲突。存放的数据状态，不可以直接修改里面的数据原创 2022-02-23 14:12:25 · 445 阅读 · 0 评论 -
vue实现数据双向绑定的原理：Object.defineProperty()
vue实现数据双向绑定的原理：Object.defineProperty()vue 实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty() 来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通JavaScript对象传回给vue实例来作为它的data选项时，Vue将遍历它的属性，用Object.defineProperty() 将它们转为getter/setter。用户看不到 getter/s原创 2022-02-23 11:38:50 · 670 阅读 · 0 评论 -
vue移动端适配解决方案
手淘适配解决方案阿里巴巴淘宝团队出品的amfe-flexible是一个用于解决移动端不同机型适配的包。在其源码中，通过不同屏幕的像素比来设置scale值，保证当前窗口的device-width始终等于物理像素设备的宽度。从而达到不同机型的适配效果。当然，要达到完全适配，我们不仅仅只用到amfe-flexible还需要用到postcss-pxtorem。postcss-pxtorem是将我们在css中写的px单位转换为rem单位。与其相似的包还有postcss-pxtorem该包则是将px转换成了2倍的r原创 2022-02-15 10:59:05 · 1775 阅读 · 0 评论 -
弹框组件库
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc原创 2021-11-04 17:41:35 · 193 阅读 · 0 评论 -
jQuery插件开发
jQuery插件开发查看jQuery源码可以发现jQuery.fn = jQuery.prototype，也就是说jQuery.fn对象是jQuery的原型对象，jQuery的DOM操作方法都在jQuery.fn 对象上定义的，然后jQuery对象就可以通过原型继承这些方法基础版jQuery插件$.fn.changeStyle = function(colorStr){ this.css("color",colorStr);}$("p").changeStyle("red");满足链式调用的原创 2021-11-03 11:45:37 · 474 阅读 · 0 评论 -
自定义Popup 弹出层
CSS <style> .popup{ position: absolute; left: 0px; right: 0px; bottom: 0px; overflow: hidden; height: 100%; } .popup .list{ position: abso原创 2021-10-02 22:48:04 · 1056 阅读 · 0 评论 -
js字符串提取中文、英文、数字
1. 提取中文 str.replace(/[^\u4E00-\u9FA5]/g,’’)2. 提取英文 str.replace(/[^a-zA-Z]/g,’’)3. 提取数字 str.replace(/[^\d]/g,’’)原创 2021-09-10 16:56:45 · 6915 阅读 · 2 评论 -
禁止html5手机端双击页面放大的问题
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">1. meta标签的作用是让当前viewport的宽度等于设备的宽度2. maximum-scale为允许用户的最大缩放值3. user-scalable为是否允许用户进行缩放4. yes(默认)代表允许，no(0)代表不允许...原创 2021-09-10 09:44:12 · 323 阅读 · 0 评论 -
弹性盒子子元素设置width失效
场景：在弹性盒子的结构下，做超出部分元素滚动，需要设置display: flex; flex-wrap: nowrap;解决方案： 需要用flex 指定写法 flex: 0 0 100px;原创 2021-09-06 14:21:38 · 679 阅读 · 0 评论 -
jQuery 实现点击图片查看原图
分析：点击小图片，展示大图片、蒙版、删除(x)；点击删除(x)，隐藏大图片容器原理：通过事件代理获取到img的src，赋值到大图片的src中，再显示大图片的容器（蒙版）；点击 “X” 时隐藏大图片的容器（蒙版） <style> /* 小图片 */ .mixImg{ width: 200px; } img{ width: 100%; } /*原创 2021-09-02 16:47:48 · 1628 阅读 · 0 评论 -
微信小程序开发进阶 - 生命周期
App() 函数是整个小程序的入口onLoaunch: 小程序初始化完成nShow: 小程序显示，初始化完成后会调用，从后台切换进来也会调用onHide: 小程序隐藏，用户在微信中点击后退按钮算隐藏，用户按Home键也算隐藏，这时onHide方法都会被调用getApp() 这是一个全局函数，在任何地方调用这个函数都可以得到App的实例，需要使用App对象相关属性的时候可以引用Page 是小程序中另一个重要的对象，它表示小程序每一个单独的页面。它也包含生命周期data: 表示页面原创 2021-07-26 14:15:08 · 100 阅读 · 0 评论 -
jQuery自定义信息提示框组件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>显示消原创 2021-07-25 21:22:14 · 356 阅读 · 2 评论 -
插件进入显示：{“errcode“:40029,“errmsg“:“invalid code,hints:[req_id:rljdFLyWf-jkkUpa]“}，无法体验，请修改后再提交审核（测试环境
小程序插件发布审核不通过，报 “errcode”: 400921、问题如下:插件进入显示：{“errcode”:40029,“errmsg”:“invalid code,hints:[req_id:rljdFLyWf-jkkUpa]”}，无法体验，请修改后再提交审核（测试环境wifi/4G：Android honor x10 10 微信8.0.0）2、分析：40092 表示无效的 oauth_code微信开发过程中，根据回调code获取snsapi_userinfo的时候，遇到了错误提示{“err原创 2021-07-23 15:18:16 · 804 阅读 · 1 评论 -
2021 前端常问面试题---（持续更新中。。。）
HTML1、语义化标签结构清晰、代码可读性较好、无障碍阅读、更利于搜索引擎抓取和维护2、videoposter 带有预览图的视频播放器 poster="/images/logo.png"CSS1、CSS的选择器类选择器 .p1{}ID选择器 #p1{}标签选择器 p{}分组选择器 p,a,li{}后代选择器 div ul li{}属性选择器 [name=“p1”]{}通用选择器 *{}兄弟选择器 p+a{}父子选取器 div>p{}2、水平垂直居中方法一：原创 2021-05-21 18:57:33 · 944 阅读 · 0 评论 -
vuex数据持久化插件（vuex-persistedstate）解决刷新页面数据消失的问题
第一步 安装插件npm install vuex-persistedstate第二步在 store/index.js 中引入import Vue from 'vue'import Vuex from 'vuex'// vuex持久化插件import createPersistedState from "vuex-persistedstate"Vue.use(Vuex)export default new Vuex.Store({ state: { }, getters:{原创 2021-05-07 10:49:55 · 511 阅读 · 3 评论 -
解决横向滚动条的问题
标签<div class="nav"> <ul> <li>小编精选</li> <li>今日上新</li> <li>人气爆款</li> <li>春日裙装</li> <li>小个显高</li> <li>微胖遮肉</li> &l原创 2021-05-06 14:50:22 · 445 阅读 · 0 评论 -
VUE中引入插件实现px自动转换rem
// 1、安装cnpm i amfe-flexible -Scnpm install px2rem-loader -D// 2、在main.js引入包import "amfe-flexible"// 3、在vue.config.js中配置module.exports = { chainWebpack: config => { config.module .rule('less') .test(/\.less$/原创 2021-05-01 11:00:20 · 350 阅读 · 0 评论 -
前端常用的快捷键
CTRL + shift + d 复制一整行 CTRL + d 选择相同文字 shift + 方向键 选择文字 CTRL + z 返回上一步 CTRL + y 返回下一步 end 把光标移动到最后一位 （笔记本：fn + end shift + end） shift + ctrl + k 删除一整行 CTRL + enter ...原创 2020-12-15 19:54:38 · 2092 阅读 · 0 评论 -
hello 优快云
hello 优快云原创 2020-08-25 17:04:56 · 100 阅读 · 0 评论