jocchoc-CSDN博客

原创移动端active伪类无效，最佳解决办法

移动端active伪类无效，最佳解决办法前言active伪类，常用于按钮点击态的样式。然而移动端ios web页面，常遇到active伪类无效的问题。一、为什么无效参看链接：https://developer.mozilla.org/en-US/docs/Web/CSS/:active#browser_compatibility二、最佳解决办法body标签加上ontouchstart属性。用js去监听touchstart亦可，但不够优雅。...

2021-02-25 17:40:31 813

原创百度地图API，自定义圆形头像标柱

web端基于百度地图，呈现自定义圆形头像项目需求基于百度地图，在当前用户的位置上，呈现用户圆形的头像。并附加一个水滴状的背景图。如图所示：基本思路原本打算通过BMap.Icon分别来添加水滴背景和头像，并用叠加的方式来显示。但是后台返回的头像是矩形，API里面也没有找到圆角化功能。所以，此处使用自定义标柱的方式来实现该功能。（如果后台返回的图片为圆形，建议用叠加的方式）具体...

2019-07-17 10:42:56 1340 3

原创控制webview_flutter导航条返回键行为

作为一名web开发人员，也按耐不住来蹭一波flutter的热度。项目中要求用flutter嵌套web，此处采用webview_flutter 插件【官方文档】。插件的使用方法不做赘述。此处分享：如何控制内嵌web的返回键行为，返回web上一路由 or 退出webview ?1. 自制导航条由于webview_flutter没有封装导航条，首先我们需要自制一个带有返回箭头的导航条。return...

2019-05-21 18:35:10 4283 7

原创解决Fixed布局失效的问题

解决transform导致的Fixed布局失效的问题问题描述当父元素存在css3的transform属性时，会导致子元素的fixed布局失效（其表现像化为absolute布局）。场景示例例如在vue-cli项目中，长遇见这种情况。当使用vue-router路由切换效果，导致页面固定在底部的按钮布局失效。路由切换完毕，按钮归位。解决办法经过一番折腾，总结最好的解决办法就是。用...

2019-05-16 17:38:22 5733

原创 npm 安装React Devtools调试工具

前言这里主要写给和我一样摸索的新手，之前相信大家也看到了网上的一些安装方法，有的给你个git上的下载链接，然后就没有然后了(好像官方也没给个具体操作)；有的让你去google商店下载一个.crx，前提你的网能翻墙。这里主要讲一下如何通过git上的react-devtools文件下载后打包一份扩展程序，来对chrome浏览器进行插件安装。去git上下载react-devtools文件到本地

2018-01-09 11:39:10 25136 6

原创背景图片切换实现轮播效果，并解决抖动问题

应用场景页面需要做持续性图片切换的效果。考虑到页面的性能消耗，采用css3控制一张sprite背景图切换来实现效果。部分代码展示这里是一个宽高比2：1的图片.want-club { position: relative; width: 36%; height: 0; padding-bottom: 36%; background-imag

2017-12-14 16:17:04 7108

原创微信端开发H5页面的时候，audio标签在苹果机上无法进行自动播放

所遇问题在微信端开发H5的时候，audio标签在苹果机上无法进行自动播放原因分析及解决方案<audio controls="controls" id="music" loop="loop"> <source src="./assets/sound/music.mp3" type="audio/ogg" /> &

2016-08-09 11:23:04 23058

jocchoc的博客