![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
APP开发
stack君
这个作者很懒,什么都没留下…
展开
-
try{}catch{}语句+选择进度条时间
try{}catch{}语句+选择进度条时间chooseVideoTime: function (event) { try { var currentClientX = event.clientX var distance = currentClientX - this.progressBarOffsetLeft // 在进度条上选中的距离 if (distance < 0) return this.pl原创 2021-11-26 16:18:33 · 224 阅读 · 0 评论 -
节流处理(throttle)
关于节流的实现,有两种主流的实现方式,一种是使用时间戳,一种是设置定时器。一、使用时间戳让我们来看第一种方法:使用时间戳。当触发事件的时候,我们取出当前的时间戳,然后减去之前的时间戳(最一开始值设为 0 ),如果大于设置的时间周期,就执行函数,然后更新时间戳为当前的时间戳,如果小于,就不执行。// fn 是需要执行的函数// wait 是时间间隔const throttle = (fn, wait = 50) => { // 上一次执行 fn 的时间 let previous =转载 2021-11-26 13:14:59 · 449 阅读 · 0 评论 -
什么是token
对于初学者来说,对Token和Session的使用难免会限于困境,开发过程中知道有这个东西,但却不知道为什么要用他?更不知道其原理,今天我就带大家一起分析分析这东西。一、我们先解释一下他的含义:1、Token的引入:Token是在客户端频繁向服务端请求数据,服务端频繁的去数据库查询用户名和密码并进行对比,判断用户名和密码正确与否,并作出相应提示,在这样的背景下,Token便应运而生。2、Token的定义:Token是服务端生成的一串字符串,以作客户端进行请求的一个令牌,当第一次登录后,服务器生成一个T转载 2021-11-18 13:35:43 · 176 阅读 · 0 评论 -
搜索功能实现
搜索功能实现Search.vue要接受City.vue传递的数据 ,所以City.vue中:<city-search :cities="cities"></city-search>Search.vue,添加搜索结果模块,并添加搜索逻辑://搜索结果模块,keyword有值才显示<div class="search-content” v-show="keyword"> <ul> //循环搜索结果 <li原创 2021-10-26 14:03:04 · 413 阅读 · 0 评论 -
函数节流阻止过于频繁的重复操作
函数节流通过定时器,和清除定时器的原理,禁止设定时间内,同样的一个事件操作data () { return { timer: null }},methods: { funcxxx () { if (timer) { clearTimeout(timer) } timer = setTImeout( () => {xxx},time) }}...原创 2021-09-07 11:05:42 · 79 阅读 · 0 评论 -
vue兄弟组件数据传递
Alphabel.vue字母模块滚动的监听#添加3个touch事件绑定,因为把cities的值push到letters里了,所以原来循环的cities就变为letters, key值变为item值<ul class="list"> <li class="item" v-for="item of letters" :key="item" :ref="item" @click="handleLetterClick"原创 2021-09-07 10:58:14 · 118 阅读 · 0 评论 -
兄弟组件间联动(以字母模块绑定城市列表模块为例)
兄弟组件间联动(以字母模块绑定城市列表模块为例)City.vue中有Alphabel.vue和List.vue两个子组件1、Alphabel.vue——绑定点击事件获取内容(点击的字母)传给City.vue//添加click点击事件<li class="item" v-for="(item,key) of cities" :key="key" @click="handleLetterClick"> {{key}}</li>//mehtods里添加hand原创 2021-09-06 21:41:41 · 180 阅读 · 0 评论 -
路由配置,首页与城市选择页面的链接
路由配置,首页与城市选择页面的链接1) src\router\index.js文件中//添加引入组件import Vue from 'vue'import Router from 'vue-router'import Home from '@/pages/home/Home'import City from '@/pages/city/City'routes: [{ path: '/', name: 'Home', component: Home原创 2021-09-04 14:27:18 · 102 阅读 · 0 评论 -
多终端同步工具Browsersync
在cmd窗口输入:cnpm install -g browser-sync下载完成:cmd打开需要监听的项目文件并输入:browser-sync start --server --files "**/*.js,**/*.css, **/*.html"```![在这里插入图片描述](https://img-blog.csdnimg.cn/20210406200252377.png)回车后自动跳出调试页面,端口号为3000:![在这里插入图片描述](https://img-blog.csd原创 2021-04-06 20:10:52 · 150 阅读 · 0 评论 -
解决轮播图容器排铺缩放问题
用以下HTML代码实现轮播图的结构层:<div id="slider" class="slider"> <div class="slider-item-container"> <div class="slider-item"> <a href="###" class="slider-link"> <img src="img/1.jpg" al原创 2021-03-31 21:31:14 · 247 阅读 · 0 评论 -
电商网站首页内容区域如何使图文被同一个链接覆盖?
两步解决图文被同一个链接覆盖首先使图文被同一个<a></a>包裹:再设置a标记的css属性{display: block}将a标记撑开来就可以了。效果:原创 2021-03-29 20:02:11 · 82 阅读 · 0 评论 -
媒体查询:基础知识
1、什么是媒体查询例:当监测到屏幕宽度大于等于900px时,设置body背景颜色为红色。@media screen and (min-width:900px){ body{ background: red; }}@media:媒体查询关键字screen:屏幕类型and:逻辑与(min-width: 900px):特征表达式body{background: red;}:执行语句2、为什么需要媒体查询一套单一样式无法适应各种大小的屏幕,媒体查询针对不同的屏幕大小写样式,可以使页面在原创 2021-03-22 15:33:35 · 812 阅读 · 0 评论 -
应用图标字体
阿里巴巴矢量图标库: https://www.iconfont.cn/搜索关键词,下载心仪图标:解压缩后留下这四个文件,其余删除:在HTML文件中引入该CSS文件:用标签引入图标字体:效果:或进一步对其添加样式:效果:...原创 2021-03-18 15:28:17 · 77 阅读 · 0 评论 -
视口-viewport
视口HTML标签: <meta name="viewport" content="width=device-width, initial-scale=1.0">添加不可缩放属性: <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1, minimum-scale=1">JavaScript中获取视口参数:原创 2021-03-17 19:59:27 · 99 阅读 · 0 评论