- 博客(58)
- 收藏
- 关注
RSS订阅原创 if else、switch的优化
文章目录@[toc]场景普通1. 对象法2. Map法进阶1. 拼接字符对象法2. 拼接字符Map法3. 对象作配对标识Map法4. 拼接字符+正则Map法场景摆脱if else和switch，条件判断大量枚举值大量配对标识执行不同的方法普通单个条件判断1. 对象法const codesObj = { '1': 'xxxxxx', '2': 'xxxxxx', '3': 'xxxxxx', '4': 'xxxxxx', '5': 'xxxx
2020-06-07 18:43:40
487
原创 小程序使用iconfont
文章目录vue项目使用iconfont一、小程序使用iconfont1. 找到创建的图标库2. 查看生成的样式文件在线链接3. 复制在线链接，直接用浏览器打开4. 小程序中引入iconfont5. 小程序使用iconfont6. 页面使用iconfont二、组件样式隔离导致iconfont无效三、在伪类选择器中使用iconfont1、iconfont作为伪类图标2、iconfont作图片缺省图vue项目使用iconfont使用iconfont图标样式库-CSDN一、小程序使用iconfont与
2020-05-31 19:34:09
1916
原创 微信小程序滚动Tab选项卡：左右滑动切换、触底加载分页
文章目录效果图一、顶部标签栏二、列表内容部分swiper组件高度及上下滚动样式三、数据结构及赋值方法四、scroll组件触底事件(分页相关五、scroll组件的高度样式swiper组件scroll组件样式区别六、其他效果图一、顶部标签栏定位顶部便签栏，使用color-ui的组件样式实现<scroll-view scroll-x class="bg-white nav my-...
2020-05-05 22:36:56
9007
原创 短信倒计时
调用发送短信接口后，开启倒计时、并使按钮不可点击效果图实现步骤点击按钮，调用短信接口成功后把 canClick = falsevue项目使用watch监听canClick标志符canClick变化为true或false都会触发监听而倒计时只会在canClick由true变为false（点击发送）时触发倒计时结束清除定时器，并把 canClick = true部分...
2019-08-14 21:49:16
446
原创 节流工具函数封装
节流函数throttle用于解决频繁操作问题，限制一定时间内点击不触发事件文章目录一、不同的实现方法1、定时器2、时间戳二、最优方法三、开始封装工具函数1、utils文件夹封装2、页面内调用四、局部变量问题五、回调函数无法传参问题1、尝试不传入整个函数,而是传入`func()`2、曲线救国,给工具函数传参数,而不是给回调函数传参数一、不同的实现方法1、定时器缺点首次也会被延...
2019-08-14 19:38:58
1286
原创 数据库不支持emoji导致报错，emoji转码
对于移动端，用户有可能输入emoji，并传入数据库，会导致无法识别而报错这里涉及2个工具方法：1、utf16的emoji表情字符 转码 成utf8的字符2、八进制的字符 转码 成十六进制的emoji表情字符文章目录一、emoji转字符二、字符转emoji三、转义问题四、测试一、emoji转字符//把utf16的emoji表情字符进行转码成八进制的字符const utf16...
2019-08-11 20:42:12
569
原创 移动端grid网格布局
适用于移动端块状入口门板布局，多行应该更适用于PC端，自适应浏览器，拉伸缩小，布局改变文章目录@[toc]一、效果二、示例1、示例12、示例2三、PC端示例一、效果二、示例1、示例1第一种示例只需要在父级写grid布局即可html外层css.parent{ display: grid; grid-template: auto auto au...
2019-08-11 19:09:52
2159
原创 mpvue读书--个人中心03_搭建后端服务器并测试
使用到koa2 + mongoose文章目录一、服务器文件目录结构二、index.js搭建服务器1、工程化搭建koa服务器三、router文件夹1、index.js配置路由根路径2、xxx.js配置路由具体路径四、数据库1、controllers引入数据库(连接数据库)2、model连接数据库3、创建数据库(设置数据库表格)4、controller创建类5、设置类的方法(操作数据库)五、...
2019-07-22 20:35:05
420
原创 小程序、mpvue项目前期准备
文章目录一、封装promisify1. 输出2. 输入3. 内容4. 效果二、封装request1. 分为mock和真是接口2. mock数据三、搭建vuex1. 创建`store仓库`2. 全局配置`$store`3. 使用vuex一、封装promisify众所周知，微信小程序api许多方法都是使用回调的方式的而这在es6出来之后，用习惯了promise和async/await的人来说，...
2019-07-21 23:49:43
362
原创 mpvue读书--个人中心02_组件封装进度条
文章目录组件效果图：一、样式二、当前年份三、今年已过去多少天1、当前时间时间戳2、年初时间戳3、当前时间戳与年初时间戳的差四、过去天数百分比1、总天数，满足以下两个条件的整数称为闰年2、百分比的值，四舍五入保留一位小数进度条组件用于显示当前年份，尽量距离年初多少天，所占的百分比即需要：当前时间年份当前时间时间戳年初凌晨时间戳今年总共多少天组件效果图：一、样式...
2019-07-21 23:48:10
291
原创 mpvue读书--个人中心01_页面+登录+扫一扫
一、个人中心大概实现流程二、个人中心效果图三、个人中心页面部分个人中心页面的组成部分为头像部分进度条部分扫一扫部分弹窗登录部分文章目录一、头像部分二、扫一扫部分三、登录逻辑1、是否登录状态判断2、弹窗组件3、登录事件一、头像部分用到了vuex中的用户信息（假设已经存入）关于vuex配置二、扫一扫部分用到了微信小程序apiwx.scanCode文档这里mpv...
2019-07-15 13:55:01
791
原创 小程序时间处理方法无效NAN
小程序对时间处理方法做了限制文章目录js的日期转时间戳方法一、出现问题二、解决办法三、补充：js的日期转时间戳方法Date.parse(日期字符串)可以转换为时间戳数字类型我的目的是：用于计算与当前时间的差，返回xx分钟前，xx天前因此还要把时间戳转为时间对象，来进行相减计算new Date(时间戳数字类型)时间戳转时间对象结果一步步排查问题，问题出在第一步日期转时间戳就没转...
2019-07-08 23:49:12
1282
原创 弹窗组件点击确认取消按钮，冒泡触发底下页面事件（冒泡）
如题，在我封装自定义弹窗组件的时候出现了冒泡问题用vue很简单解决冒泡事件，加个@click.stop=""就可以了出现问题下图是假设我的页面有内容是绑定了点击事件实际情况应该是一些详情页面的点击事件做登录拦截如：点赞等操作。登录弹窗出来后，点击弹窗组件会导致点击到页面内容当然，给蒙板和取消按钮的事件加上 .stop即可阻止冒泡但是封装小程序的登录弹...
2019-07-05 20:54:50
4997
2
原创 mpvue读书--个人中心00_准备
本项前端使用mpvue，微信小程序api后端使用koa2，mongoose一、个人中心大概实现流程二、个人中心效果图三、个人中心页面部分四、项目搭建mpvue读书–项目初始化vuex搭建到这一步，我们的前端页面就能掌控自如了，而且还能有得力助手vuex的帮助让我们在这些基础上，完成我们的项目吧。五、创建页面并配置底部tabbar底部tabbar在app.jso...
2019-07-03 00:04:56
232
原创 mpvue读书--项目初始化
使用到vue和小程序语言关于vue基础本文不做讲解，可以自行查询学习文章目录简洁版步骤详细版步骤一、安装mpvue模版项目二、安装scss三、删除无用文件四、注释eslint五、新建页面和组件进行测试1. 新建页面2. 测试新建页面3. 新建组件简洁版步骤命令行vue init mpvue/mpvue-quickstart 项目名cd 项目名cnpm icnpm i sas...
2019-06-30 20:57:08
256
原创 koa2+mongoose简易全栈前后端通信项目
这只是简单配置前后端，没有处理错误，也没有做好模块化后面会完善，这是作为入门，了解前后端通信的整体流程文章目录一、创建前端项目二、创建Koa服务器1、在根目录创建server文件夹2、初始化server项目3、安装koa相关依赖4、配置基础服务器并测试1).关于new构造函数2).启动服务器三、优化服务器编写1、安装Babel7相关依赖2、配置Babel7文件3、安装自动重启服务器依赖4、配置...
2019-04-19 15:07:22
940
原创 《node入门》笔记
文章目录目标一、创建简易HTTP服务器1、关于node内置核心模块2、关于使用import引入模块3、代码实现创建服务器4、为服务器添加简易响应二、创建路由1、模块化server.js2、创建路由模块3、路由模块与server参数关联三、创建请求处理程序四、server响应传递到响应方法中五、nodeJS单线程导致阻塞问题六、处理POST请求七、处理上送文件数据八、总结至少对一门诸如Ruby、...
2019-04-15 15:48:56
238
原创 该用require还是用import?
文章目录概念一、ES6模块化的使用1、es6中的export2、es6中的import二、CommonJs规范的使用1、CommonJs中的exports2、CommonJs中的require三、CommonJs规范与ES6中import的区别1、引入模块的不同点2、引入模块的性能不同点3、暴露模块的不同点四、在nodeJs中怎么使用概念CommonJs是一种模块化规范，在ES6之前的，用于...
2019-04-14 00:12:31
2780
原创 scss实用进阶-样式复用
此前我使用scss，仅仅是为了用而用，只知道它的嵌套写法给我们带来了很多方便，即美观也不用手动嵌套。但其实scss有很多其他的优点才是精髓，这里详细说一下自己使用scss时，用到的样式复用方法。欢迎补充。文章目录@[toc]一、引入外部公共样式变量二、@mixin的使用1、不传参的@mixin示例2、传参的@mixin示例3、灵活利用默认值三、常用@mixin样式模版举例1、省略号mixin...
2019-04-11 17:33:36
17319
原创 css伪元素after、before
此前，我使用伪类基本上只用到了:first-child和:last-child，来给遍历的列表标签去除最后一项的分割线和边距样式之类的。因为我尽量避免使用浮动，所以也没有常使用伪类来去除浮动。最近做一个头像列表的时候发现，用伪元素:after或者:before意外的好用。效果如图：文章目录@[toc]一、概念二、应用三、after、before的坑1、伪元素添加图片2、苹果端伪元素不生...
2019-04-10 23:18:26
1226
转载 前端面试--一面05_HTTP协议
文章目录一、HTTP概念二、HTTP工作流程三、HTTP协议的主要特点四、HTTP报文的组成部分五、HTTP方法六、POST和GET的区别七、HTTP状态码八、什么是持久连接？九、什么是管线化？一、HTTP概念超文本协议传输二、HTTP工作流程首先客户机与服务器需要建立连接。只要打开某个超链接，HTTP的工作开始。建立连接后，客户机发送一个请求给服务器，请求方式的格式为：统一资源标...
2018-10-24 18:22:59
216
原创 前端面试--一面04_DOM事件
关于DOM事件问题不难，主要是不知道这些专业名词的意思文章目录关于DOM事件一、基本概念1、DOM事件级别2、DOM事件模型3、DOM事件流4、DOM事件捕获具体流程二、应用1、event对象的常见应用2、自定义事件怎么写一、基本概念1、DOM事件级别DOM0dom.onclick=function()DOM2dom.addEventListener(‘click’,...
2018-10-24 10:55:10
294
原创 前端面试--一面03_CSS盒模型
题目：谈谈你对CSS盒模型的认识文章目录题目：谈谈你对CSS盒模型的认识一、分析：二、回答：1、盒模型的基本概念、区别2、怎么应用2种盒模型3、JS怎么获取盒模型(content)的宽高三、实际情况中的实例图片中父元素的高度是多少？四、延伸问题BFC的概念、原理、如何创建、使用场景BFC的详细内容可[参考这个](https://www.cnblogs.com/libin-1/p/7098468....
2018-10-23 21:41:30
303
原创 前端面试--一面01_一面须知
一面准备须知：项目来源：慕课网如有建议和疑问可联系QQ：1017386624邮箱：1017386624@qq.com
2018-10-20 12:15:42
394
原创 Vue音乐--搜索页面13_优化
大概步骤：目标效果十三、优化要点：搜索历史和热门搜索添加滚动适配小播放组件搜索输入框节流设置滚动搜索结果列表，收起手机端输入键盘（一）、搜索历史和热门搜索添加滚动在search.vue中为2个组件外包一个div再添加滚动组件<scroll ref="scroll" :data="shortcut"> <div class="search-s...
2018-10-11 17:48:06
448
原创 Vue音乐--搜索页面12_清空按钮弹窗页面
大概步骤：目标效果十二、弹窗页面要点：弹窗样式布局公共组件，外部可控性（一）、点击垃圾桶show弹窗页面为了不在没必要的地方渲染，不想以前那样用v-show标识来打开，而是在弹窗页面的组件中设置内置方法↓searchHistory.vue<!--弹窗组件--> <confirm ref="confirm" co...
2018-10-11 17:29:27
388
原创 Vue音乐--搜索页面11_搜索历史逻辑点击、删除
大概步骤：目标效果七、点击歌手li要点：点击li添加到输入框点击x删除当前搜索历史点击垃圾桶清空搜索历史（一）、点击添加到输入框在热门搜索关键词里是一样的逻辑，主要是做好父子组件事件的派发就可以了。↓search.vue addQuery(item){ this.$refs.searchbox.setQuery(item) },（二）、点击...
2018-10-11 16:52:42
621
原创 Vue音乐--搜索页面10_搜索历史布局
大概步骤：目标效果十、搜索历史组件布局要点：↓suggestHistory.vue<div class="search-history" > <div class="search-history_title"> <h1>搜索历史</h1> <i class="iconfont" @click=&
2018-10-11 16:18:24
325
原创 Vue音乐--搜索页面09_搜索历史记录本地缓存
大概步骤：目标效果九、搜索历史数据新建要点：新建vuex的state数组变量，点击时存入和调用时读取数据即可利用本地缓存插件，取和操作再存如果不可考虑本地缓存的话，就是获取到state中数组，并把点击的值push进行数组，然后存下这个数组替换掉state中的即可而要存入本地缓存的话，即push进本地缓存，state则从本地缓存中获取。操作稍微复杂因此，单独做成js用...
2018-10-11 16:04:02
754
原创 Vue音乐--搜索页面08_点击歌曲
大概步骤：目标效果七、点击歌曲li要点：与排行榜歌曲列表的歌曲li点击对比是把获取到的所有歌曲列表设置为vuex中的播放列表而搜索结果的歌曲li是把一首歌添加进播放列表，而且不是简单push，而是插入正在播放因此要和排行榜歌曲li一样要操作的mutations是多个，利用到actions，来操作多个mutations（一）、点击触发actions事件↓sea...
2018-10-11 15:08:39
750
原创 Vue音乐--搜索页面05_搜索结果列表布局
大概步骤：目标效果五、搜索结果列表布局要点：根据li的歌手type，来渲染相应的值↓suggest.vue<ul> <li v-for="(item,index) of result"> <i class="iconfont " :class="_otherIcon(item)"> &
2018-10-11 14:03:20
292
原创 Vue音乐--搜索页面06_下拉刷新搜索结果
大概步骤：目标效果六、下拉刷新要点：添加滚动公共组件scroll给滚动组件，添加滚动到底部方法，触发事件触发获取数据事件，page为++即：获取搜索结果数据有两种情况监听到输入框的值改变获取数据，page为1滚动到底部获取数据，page为++（一）、添加滚动事件↓scroll.vue开启滚动到底部标识flag派发事件到父组件操作props:{ //开启...
2018-10-11 12:57:48
363
原创 Vue音乐--搜索页面07_点击歌手
大概步骤：目标效果五、搜索结果列表布局要点：根据li数组项的type区分当前项是歌手和歌曲区分后dom渲染不同的内容SearchSuggest.vue&amp;lt;ul&amp;gt; &amp;lt;li v-for=&quot;item of result&quot;&amp;gt; &amp;lt;i class=&quot;iconfo
2018-10-11 12:03:52
474
原创 Vue音乐--搜索页面04_根据输入值抓取搜索数据
大概步骤：目标效果三、根据输入值抓取搜索结果数据要点：（一、抓取数据）在QQ音乐移动端网页里，输入值，细心查找数据获取但是双击进去，会发现浏览器没有打开相应的json，而是以下数据也就是说我们要跨域进行数据请求了找到相应url跨域需要的数据，和hash数据build- -&amp;amp;amp;gt;webpack.dev跨域请求url//搜索结果数据before(ap...
2018-10-11 11:42:14
1368
1
原创 Vue音乐--搜索页面03_热门搜索组件
大概步骤：目标效果三、新建热门搜索关键词组件的数据获取和布局要点：QQ音乐移动端网页抓取热门搜索的关键词数据截取关键词数据数组的前10个对数据列表布局为圆角边框样式点击热门搜索关键词，关联到输入框中（一）抓取热门搜索关键词数据↓ api - ->search.jsimport jsonp from '@/common/js/jsonp' //引入...
2018-10-10 22:39:15
1101
原创 Vue音乐--搜索页面02_搜索框逻辑
大概步骤：目标效果二、输入框的数据触发事件要点：使用双向数据绑定 v-model监听输入框输入的数据，并传递给父组件去操作添加取消按钮，清空输入框和显示隐藏取消按钮（一、双向数据绑定）&lt;!--双向数据绑定在query变量上--&gt;&lt;input v-model="query" /&gt;&lt;!--展示按钮在query有值的时候，点击事件
2018-10-10 20:59:35
646
原创 Vue音乐--搜索页面01_搜索框布局
大概步骤：目标效果一、新建搜索框组件的布局要点：把输入框做成公共组件search-box公共组件，尽量只派发事件，而不过多操作（除内部方法）使用iconfont的ui字体使用flew布局设置input输入框的默认内容样式配置好组件结构，在父组件search.vue中引用SearchBox.vue<div class="search-box"> &...
2018-10-10 20:17:36
1152
原创 Vue音乐--排行榜页面08_优化
大概步骤：目标效果八、优化要点：给排行榜歌曲列表添加排名符号刷新的时候返回路由rank详情页面头部图片换成第一首歌曲的图片（排行榜图片有字不适用）收费歌曲，无法播放，获取不到url，弹出弹窗排行榜歌曲列表的数据有点庞大，做成分段获取，往下拉再获取剩下的数据（1）歌曲列表添加排名符号因为是公共组件，所以，以父子组件传入标记为是否show在公共组件中加入相关do...
2018-10-06 15:23:49
2175
原创 Vue音乐--排行榜页面07_抓取详情页数据
大概步骤：目标效果二、抓取排行榜详情页数据要点进入QQ音乐移动端，查找Network中的排行榜首页数据，在XHR中找到使用之前写好的jsonp解析数据的方法，传入处理好的url点击事件传入点击的排行榜idjsonp数据url数据相关代码import jsonp from '@/common/js/jsonp' //引入jsonp模块import {co...
2018-10-06 14:40:44
747
原创 Vue音乐--排行榜页面06_详情页面布局
大概步骤：目标效果六、新建排行榜详情页 HTML布局要点：使用滑动动画引用封装好的公共组件musiclist即可传入从store中的数据，进组件中引用加载中组件 &lt;transition name="slide"&gt; &lt;div class="rank-detail"&gt; &lt;music-li
2018-10-06 12:52:29
696
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人