前端研究记录
文章平均质量分 75
MarronBan
一天到晚睡不够,成为前端工程师后还想干点别的。
展开
-
【前端】一个拖拽效果
拖拽图片其实原生API是支持拖拽的。试想一个业务场景,有许多图片在竖向排列在左侧,右侧区域有一个矩形框,可以通过拖拽,将左侧的图片复制进右侧的矩形区域中。先写好页面结构。左侧有三个img-item,由imgbox包裹。img-item里是一个img,有draggable="true"属性。右侧有个矩形框。<div class="imgbox" id="imgbox"> <div class="img-item"> <img src="." alt="1" drag原创 2021-05-29 09:56:23 · 679 阅读 · 0 评论 -
【前端】一个简易的下拉加载效果
业务场景如图,content的高固定,list-item过多时展现滚动条。content可以是body或者任意一个div。只要将期望产生滚动条的元素设置为content就行了。实现方法以该图片为例,实现下拉加载。在还未拉动滚动条时,不将全部的list-item展示。自定义展示多少个,比如上图,展示前3个就可以了。(能撑出滚动条,但又不全部加载完)拖动滚动条,当到达底部时,加载剩余的N张图片。(N也是自定义)一个例子一开始只加载4张图片,滚动条到content底部时,加载一张图片知道原创 2021-04-10 12:37:07 · 1035 阅读 · 0 评论 -
【Vue】《从0开始写一个WebApp》其五
其五:购物车部分开发使用Vuex存储购物车数据数据结构第一层:商户id;第二层:商品id为索引,内容是商品数据。state: { cartList: { /* 1: { 1: { _id: "1", name: "番茄 250g / 份", imgUrl: "http://www.dell-lee.com/imgs/vue3/tomato.png", sales: 10, price: 33.6, oldPrice: 39原创 2021-03-27 21:12:08 · 250 阅读 · 0 评论 -
【Vue】《从0开始写一个WebApp》其四
其四:附近店铺和商家详情post、get请求封装前后端通信时,一般会根据接口选择post或get请求。前面使用模拟接口实现登陆时,只封装了post方法。在进行接下来的开发时,先把get方法也封装一下。在src/utils/request.js下。将post部分的代码复制一份,改成get请求。将data改为params,去掉headers的参数。export const get = (url, params = {}) => { return new Promise((resolve, rej原创 2021-03-26 19:06:44 · 136 阅读 · 0 评论 -
【Vue】《从0开始写一个WebApp》其三
其三:登陆&注册部分开发布局页面其实很简单,照着画就行了。登陆和注册的页面基本一致,可以写好一个复制一份。逻辑先来理一下假登陆注册的逻辑吧。无论用户输入什么,只要点击登陆按钮就算登陆成功,跳转到Home页。无论用户输入什么,只要点击注册按钮,就算注册成功,跳转到登陆页。点击“立即注册”,跳转到注册页。点击“已有账号去登陆”,跳转到登陆页。登陆后,无法再回到登陆页面(无论是通过按钮、回退还是改url),只能跳转到Home页。接下来从第一条开始把逻辑写了。登陆及登陆校验在登陆原创 2021-03-24 19:25:40 · 146 阅读 · 0 评论 -
【Vue】《从0开始写一个WebApp》其二
其二:首页部分开发布局先根据设计图(来源于辅助资料)分析下首页的布局(图片是已实现的首页布局)先说明,划分页面的方式多种多样,没有绝对的好坏。个人的项目可以以自己的喜好为准,团队的项目以大家都能接受的方案为准。我将首页分成了两大块,wrap和docker。docker明显是一个固定底部,而且存在于所有页面,可以抽离出来作为一个全局组件。wrap里又可以细分,分成staticpart和nearby,或者position+search+banner+icons+gap和nearby。其实都一样。组原创 2021-03-23 17:40:55 · 104 阅读 · 0 评论 -
【Vue】《从0写一个WebApp》其一
其一:初始化说明说明该项目来源于慕课网前端工程师课程2020版第24周-第26周。项目所有资源包括设计图、图标、图片、接口均来自该网站辅助资料。此项目只做学习交流使用。代码会更新在这里。为什么要写这个?你的代码与来源网站的示范代码有何不同?答:示范代码使用的是Vue3.0版本,该项目使用的是Vue2.6版本,在一些功能的实现上会略有不同。 比如,Vue2.0版本下,template模板内只允许有一个根节点,而3.0版本去除了这些限制。 3.0版本下,加入了Composition原创 2021-03-23 17:36:16 · 89 阅读 · 0 评论 -
【原型】Axure基本入门
Axure基本入门0.介绍Axure是拿来干嘛的,画原型。高保真原型与功能原型。1.组件一览(有些翻译叫部件,有些叫元件,反正都一个意思)将组件库里的组件拖拽到页面上后,右边工具栏会出现三个分栏,分别是:属性、说明、样式。a.组件样式不同组件可设置的样式略有不同,通用的有:背景颜色,文字排列,文字样式大小,背景图片等。对于图片、按钮,有宽高、阴影、圆角、透明度、padding设置对于文本框,单选多选框,有禁用/启用设置根据基本组件绘制的仿钉钉首页:b.组件事件在属性那一栏选择交互原创 2021-03-18 12:51:43 · 1226 阅读 · 0 评论 -
【面试】Vue基础
Vue基础1.差值表达式可以放值和表达式{{message}}{{if(flag)?yes:no}}2.v-html 会将其子元素覆盖,有xss攻击风险。3.computed与watch的区别computed有缓存;watch没有computed: { now: function () { return Date.now() }}computed是用来属性直接计算,而watch是监听属性的。比如姓和名组成名字computed:{ 姓名:function(){原创 2021-03-06 23:03:11 · 101 阅读 · 0 评论 -
【面试】前端基础(三)
JavaScript数据类型基本数据类型Number String Boolean Undefined Symbol引用数据类型Object Array Function Map Set Null如何判断数据类型typeof 能判断所有的值类型,能识别引用类型let a =>undefinedlet b = 1 =>numberlet c = 'c' =>stringlet d = true => booleanlet e = Symbol('e') =&原创 2021-03-05 12:58:53 · 87 阅读 · 0 评论 -
【面试】前端基础(二)
CSSFlex画色子box设置flex,设置主轴的对齐方式,再设置交叉轴的对齐方式。个别的需要分成多列,单独设置item的样式要画多少个点就加多少个item<box><item></item></box>从一个色子开始:item1:box:justify-content: center;align-items: center;或者box:justify-content: center;item1:align-self: cen原创 2021-03-04 11:52:50 · 118 阅读 · 1 评论 -
【面试】前端基础(一)
HTML5什么是语义化通过使用不同标签来编写网页。比如标题就使用h1标签,一段文字使用p标签等。语义化可以使代码具有可读性,也对搜索引擎友好。如何优化搜索引擎使用语义化的代码。h1标签只用一次。title标签协商关键字meta name=“Keywords”meta name=“Description”在默认情况下,哪些元素是块级元素,哪些元素是内联元素块级:div p h ul ol table.即display为block/table内联:img a s原创 2021-03-03 21:13:30 · 138 阅读 · 1 评论 -
【小程序】微信小程序踩坑记(一)
突发奇想之前没怎么接触微信小程序,昨天突然想用用看。于是下了开发者工具,粗略看了下文档后,想写一个简单的猜拳游戏练手,于是就开始踩坑了。实现首先页面布局很简单,上半部分是AI出拳的信息,中间是显示用户赢了还是输了,下边就是三个按钮,让用户点击选择出什么拳。本来以为wxss和css没啥区别,用css的套路写应该没问题。没想到那么快第一个坑就出现了span标签不好用了想采用<P><span>胜</span>/<span>负</span>/原创 2021-03-03 12:11:20 · 228 阅读 · 0 评论 -
【CSS】flex布局
【待补充】网址:flex布局原创 2021-01-31 20:44:48 · 72 阅读 · 0 评论 -
【Js】基本数据类型
本文介绍了Js的基本数据类型,包括其定义、方法、特殊值等原创 2020-12-04 14:06:04 · 119 阅读 · 0 评论