- 博客(17)
- 收藏
- 关注
RSS订阅原创 【前端】一个拖拽效果
拖拽图片其实原生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
658
原创 【前端】一个简易的下拉加载效果
业务场景如图，content的高固定，list-item过多时展现滚动条。content可以是body或者任意一个div。只要将期望产生滚动条的元素设置为content就行了。实现方法以该图片为例，实现下拉加载。在还未拉动滚动条时，不将全部的list-item展示。自定义展示多少个，比如上图，展示前3个就可以了。（能撑出滚动条，但又不全部加载完）拖动滚动条，当到达底部时，加载剩余的N张图片。（N也是自定义）一个例子一开始只加载4张图片，滚动条到content底部时，加载一张图片知道
2021-04-10 12:37:07
995
原创 【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
240
原创 【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
122
原创 【Vue】《从0开始写一个WebApp》其三
其三：登陆&注册部分开发布局页面其实很简单，照着画就行了。登陆和注册的页面基本一致，可以写好一个复制一份。逻辑先来理一下假登陆注册的逻辑吧。无论用户输入什么，只要点击登陆按钮就算登陆成功，跳转到Home页。无论用户输入什么，只要点击注册按钮，就算注册成功，跳转到登陆页。点击“立即注册”，跳转到注册页。点击“已有账号去登陆”，跳转到登陆页。登陆后，无法再回到登陆页面（无论是通过按钮、回退还是改url），只能跳转到Home页。接下来从第一条开始把逻辑写了。登陆及登陆校验在登陆
2021-03-24 19:25:40
122
原创 【Vue】《从0开始写一个WebApp》其二
其二：首页部分开发布局先根据设计图（来源于辅助资料）分析下首页的布局（图片是已实现的首页布局）先说明，划分页面的方式多种多样，没有绝对的好坏。个人的项目可以以自己的喜好为准，团队的项目以大家都能接受的方案为准。我将首页分成了两大块，wrap和docker。docker明显是一个固定底部，而且存在于所有页面，可以抽离出来作为一个全局组件。wrap里又可以细分，分成staticpart和nearby，或者position+search+banner+icons+gap和nearby。其实都一样。组
2021-03-23 17:40:55
96
原创 【Vue】《从0写一个WebApp》其一
其一：初始化说明说明该项目来源于慕课网前端工程师课程2020版第24周-第26周。项目所有资源包括设计图、图标、图片、接口均来自该网站辅助资料。此项目只做学习交流使用。代码会更新在这里。为什么要写这个？你的代码与来源网站的示范代码有何不同？答：示范代码使用的是Vue3.0版本，该项目使用的是Vue2.6版本，在一些功能的实现上会略有不同。 比如，Vue2.0版本下，template模板内只允许有一个根节点，而3.0版本去除了这些限制。 3.0版本下，加入了Composition
2021-03-23 17:36:16
82
原创 【原型】Axure基本入门
Axure基本入门0.介绍Axure是拿来干嘛的，画原型。高保真原型与功能原型。1.组件一览（有些翻译叫部件，有些叫元件，反正都一个意思）将组件库里的组件拖拽到页面上后，右边工具栏会出现三个分栏，分别是：属性、说明、样式。a.组件样式不同组件可设置的样式略有不同，通用的有：背景颜色，文字排列，文字样式大小，背景图片等。对于图片、按钮，有宽高、阴影、圆角、透明度、padding设置对于文本框，单选多选框，有禁用/启用设置根据基本组件绘制的仿钉钉首页：b.组件事件在属性那一栏选择交互
2021-03-18 12:51:43
1207
原创 【面试】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
88
原创 【面试】前端基础（三）
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
81
原创 【面试】前端基础（二）
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
106
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
118
1
原创 【小程序】微信小程序踩坑记（一）
突发奇想之前没怎么接触微信小程序，昨天突然想用用看。于是下了开发者工具，粗略看了下文档后，想写一个简单的猜拳游戏练手，于是就开始踩坑了。实现首先页面布局很简单，上半部分是AI出拳的信息，中间是显示用户赢了还是输了，下边就是三个按钮，让用户点击选择出什么拳。本来以为wxss和css没啥区别，用css的套路写应该没问题。没想到那么快第一个坑就出现了span标签不好用了想采用<P><span>胜</span>/<span>负</span>/
2021-03-03 12:11:20
218
原创 【c++】取反运算符与补码
例子~0=？~0=-1~表示取反，假设0为int类型，则该数在c++中是32位的，即在计算机内部表示为00000000000000000000000000000000第一位表示符号位，其余31位表示该数的值。~0就是将该数全部取反，得到32个1。但这还没完，负数在计算机中以补码的形式存储。补码 = 源码(除符号位)取反+1即32个1只是该数取反后的源码。源码取反后得到10000....0000000再+110000....0000001 //-1小试牛刀int A =
2020-11-13 17:37:06
3219
原创 【c++】使用assert编写测试用例
例子著名的德摩根定律公式如下，请使用逻辑运算符验证该定律。分析可以想到用逻辑与（&&）代替∪，逻辑或代替∩（||），最后用逻辑非（！）代替取反那么可以写出这两行代码！(A&&B)==!A||!B!(A||B)==!A&&!B可以定义A，B皆为bool类型，将结果输出，得到1便验证成功了。仔细想想可以优化一下：A，B为bool类型，各有两种取值共四种情况。1.A 为 false，B 为false；2.A 为false，B 为true；3
2020-11-12 21:59:49
344
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人