布局
南城夏季
一路浅行
展开
-
前端知识体系(6)-css篇
以下内容为 css 基础篇(1)1. 如何解决 a 标点击后 hover 事件失效的问题?改变 a 标签 CSS 属性的排列顺序:(爱恨原则)link -> visited -> hover -> activea:link:未访问的样式a:visited:已经访问的样式a:hover:鼠标移上去时的样式a:active:鼠标按下的样式按照这样书写:可以解决 a:link 样式被 a:visited 样式覆盖问题。在 CSS 中,如果对于相同元素针对不同条件的定义原创 2021-05-19 10:39:14 · 376 阅读 · 1 评论 -
console.log 控制台怎么打印有颜色的特殊的字
先看效果:使用:console.log('%c 1','color:red')console.log('%c 1','color:green')console.log('%c 1','color:green;font-size:30px;background:#ddd')打印的时候,%c 后面加打印的内容, 后面直接写css样式就可以...原创 2020-09-25 14:53:26 · 2098 阅读 · 0 评论 -
chrome控制台怎么看hover的样式
点击styles下面的 :hov,然后选中hover就可以了原创 2020-03-01 14:58:53 · 2285 阅读 · 1 评论 -
vue 自定义data属性报错解决方案
需要:接口返回的数据有中文和英文,我们用的的iview里面的CheckboxGroup我们现在是每一项显示的中文,然后需要选中的项目组成的数组是一个包含返回中另一个参数的数组。所以需要给另外一个参数自定义一个属性:代码: html: <CheckboxGroup @on-change="screenair(item.carrier)" :data-carrier="i...原创 2018-09-26 11:44:10 · 3962 阅读 · 0 评论 -
使一个元素覆盖在另外一个元素之上,使得只能点击上面的元素上
<div class="text_C"> <span style="font-size: 18px;color: black;" :class="item.status==2?'greenc':''"> {{item.statusStr}} </span> <div class="detailBtn mt原创 2018-10-11 17:32:25 · 4395 阅读 · 0 评论 -
vue路由传对象刷新会报错,数据丢失,用json字符串解决
我的订单页面---------》订单详情页面我的订单页面:encodeURIComponent(JSON.stringify(this.detailMsg))------变成json字符串,且加密toDetail(index) { request.post('/orderDetails', { orderNo: this.air_ticket[i...原创 2018-10-06 21:57:41 · 1993 阅读 · 0 评论 -
iview中的内置样式如何更改,iview中怎么使用框架中的类名类修改样式
这个问题真是困扰了这么久了。之前一直没查出来怎么去改,一直是通过行内样式来修改。问题:当一个元素封装了很多层时,我们无法找到里面封装的那个标签,所以无法要通过行内样式去修改。解决:方法一:直接重置样式 ---最简单的办法直接重置样式比如我们要修改iview中的封装的ivu-layout-header这个class类对应的样式先在浏览器找到影响样式的类名:iv...原创 2018-10-09 10:38:38 · 19888 阅读 · 2 评论 -
vue路由跳转时,总是跳转到下一个页面的底部
解决:在路由的js中写:export default new Router({ // mode: 'history', mode: 'history', scrollBehavior (to, from, savedPosition) { if (savedPosition) { return savedPosition } else { ...原创 2018-10-09 17:40:25 · 4218 阅读 · 0 评论 -
vue接口在Ie浏览器不显示的解决方法
之前使用网上普通的用的安装polyfill依赖的方法,发现并无作用,偶然间看到别人写的下面的方法,发现可以完美解决。IE浏览器不调接口的问题。 本人亲测下列两种方法可行:法一:webpack.base.conf.js中配置entry: { // "babel-polyfill"用来解决的兼容性 app: ['./node_modules/babel-polyfill...原创 2018-10-16 16:31:59 · 2416 阅读 · 1 评论 -
(业务2)vue懒加载vue-lazyload的使用
需求:为了提高用户的访问的友好性,需求在请求图片时,在图片还没有渲染出来给用户一个默认的图片1.安装vue-lazyload插件 npm i vue-lazyload --save2.在vue 的入口文件引入插件并使用loading: loading图所在的路径try:尝试几次去加载loading3.将图片的src切换成v-lazy效果:...原创 2019-05-24 23:48:42 · 338 阅读 · 0 评论 -
全局引入iview报undefined iView is not defined
请注意,你是不是之前用了按需引入的方式做了配置,然后现在又切换了全局引入,那这个时候你就需要把按需引入的配置删除:.babelrc文件下的配置删除然后全局引入就行了:import iView from 'iview';import 'iview/dist/styles/iview.css';Vue.use(iView);...原创 2019-07-28 16:59:04 · 2411 阅读 · 0 评论 -
vue-lazyload :一个简单易用的 Vue 图片延迟加载插件
介绍: vue-lazyload主要应用于图片延迟加载。包含如下的特点:小巧轻便,功能强大,易于使用 可以用于加载任何图像类型 支持Vue 1.0和Vue 2.0理解图片延迟加载:当某个网页中呈现的图片较多时,由于网络等原因,访问该网页时,所有的图片不会立马全部进行显示出来,会出现一定的网络延迟加载的现象,影响用户体验;但我们可以vue-lazyload插件来实现在图片加载的过程中,...原创 2018-09-30 09:08:13 · 2274 阅读 · 0 评论 -
vue前端通过url获取参数,进行取值报错,undified
业务代码: if (ddl == "ddl") { var result = JSON.parse(result); this.flightList=result.flightTicket return } 从url中解析result的数据格式为:{ "flightTicket": { "adultPrice":...原创 2018-09-05 17:15:09 · 3065 阅读 · 0 评论 -
-we b kit-overflow-scrolling : touch;开启手机网页快速滚动和回弹的效果
body{ overflow-x:hidden; height: 100%; /*开启手机网页快速滚动和回弹的效果*/ -webkit-overflow-scrolling: touch; font-size: 12px; font-family: "微软雅黑"; overflow-x: hidden; -webkit-text-size-adjus...原创 2018-03-31 22:15:43 · 610 阅读 · 0 评论 -
移动终端H5页面meta标签的设置
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"><meta content="yes" name="apple-mobile-web-app-capable"><meta content="原创 2018-04-01 19:54:16 · 621 阅读 · 0 评论 -
页面添加锚点的三种方式
HTML中的链接,正确的说法应该称作"锚点",它命名锚点链接(也叫书签链接)常常用于那些内容庞大繁琐的网页,通过点击命名锚点,不仅让我们能指向文档,还能指向页面里的特定段落,更能当作"精准链接"的便利工具,让链接对象接近焦点。便于浏览者查看网页内容。类似于我们阅读书籍时的目录页码或章回提示。在需要指定到页面的特定部分时,标记锚点是最佳的方法。 锚点链接对SEO的作用 锚链接是一个非常重要的概念...原创 2018-04-02 21:47:55 · 1030 阅读 · 0 评论 -
font-size=0的妙用,解决div塌陷
今天写轮播图的时候发现,在设置图片宽度时,第二张图片会塌陷到下面去,其实是出于排版的原因两个div之间留下了空白字符,才导致两个div元素之间留有间距,导致图片塌陷。另外,display:inline-block的元素之间会有一个字符的间隙,这个间隙导致了最后一个会掉下来。解决方法:1、给父元素设置font-size : 0 p x;--------推荐2、取消掉换行符,如这样:<span&...原创 2018-03-29 16:42:58 · 821 阅读 · 1 评论 -
微信小程序 swiper组件详解及实例代码
微信小程序 swiper组件常用属性:效果图:wxml123456789101112<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}} " bindchange="bindchangeTag"> &l转载 2018-04-18 19:11:42 · 3594 阅读 · 0 评论 -
location.reload() 和 location.replace()的区别和应用
首先介绍两个方法的语法:reload 方法,该方法强迫浏览器刷新当前页面。语法: location.reload([bForceGet]) 参数: bFor...原创 2018-05-04 14:31:46 · 884 阅读 · 1 评论 -
微信小程序在同一页面出现多个普通选择器怎么区分,有demo代码
看到很多人在问这个问题,我来写一下吧wxml:<view class="container log-list"><!--身份选择1 --> <view class="section identity-select"> <picker bindchange="bindPickerChange" value="{{inde原创 2018-06-07 11:45:13 · 2905 阅读 · 1 评论 -
mpvue怎么使用第三方样式weui
当我们新建一个mpvue项目后,我们需要在项目的/src/main.js 中引入 weui.css,地址https://github.com/KuangPF/mpvue-weui/blob/master/static/weui/weui.css;使用:search这部分是利用小程序input组件实现,在下面的示例中主要使用了focus和bindinput两个属性,由于mpvue从底层支持 Vue....原创 2018-06-14 16:19:11 · 18740 阅读 · 2 评论 -
mpvue 怎么写轮播图,直接用小程序的swiper组件就行了
目前用mpvue很多第三方的ui库是引入不了的,因为它不支持含有dom操作。那我们要做轮播图的话一个是手写另外一个就是用小程序的swiper组件了:原创 2018-06-09 22:35:59 · 10028 阅读 · 0 评论 -
微信小程序最新的腾讯插件报错处理和实例代码
出门在外,免不了查询地图的需求!为了帮助开发者们进一步“减负”,腾讯地图的插件添加了路线规划的能力,主要解决“向用户展示从A到B路线”的问题。使用插件的正确姿势究竟是什么呢?今天我们给大家介绍——腾讯地图插件的能力。原创 2018-06-26 12:15:18 · 4282 阅读 · 3 评论 -
HTML 中块级元素设置 height:100% 的实现
现在你给了这个div的高度为100%,它有两个父元素<body>和<html>。为了让你的div的百分比高度能起作用,你必须设定<body>和<html>的高度 !!!<html style="height: 100%;"> <body style="height: 100%;"> &l原创 2018-03-31 22:01:35 · 613 阅读 · 0 评论