SF
前端那些事
前端那些事
注册登录
关注博客
注册登录
主页
关于
RSS
App端自动播放H5视频配置
月影
2023-06-16
阅读 2 分钟
6.5k
iOS 自动播放配置1、需要在初始化的位置配置下// 是否允许内联或使用本机全屏控制器,默认是NO。 {代码...} 2、如果有些视频设置了上述代码还不会自动播放,配置WKWebview代理(_wkwebView.navigationDelegate = self;)在加载完成后代理方法里手动调用下 // 页面加载完成之后调用 {代码...} Android 自动播放配置WebSettin...
vue文字横向滚动公告
月影
2020-03-26
阅读 4 分钟
17.4k
需求 最新项目需要一个文字横向滚动效果,vue 文字横向无缝走马灯组件写的很详细,记录下来,广播出去。 解决方案 1、 HTML 先建一个div层作为公告显示区,里面包裹一个公告列表(ul); {代码...} 2、 CSS 每条公告信息(li)的margin必须设置‘px’单位,否则要转换,后面js中回到起点还要用到这个值。 {代码...} 3、 JavaS...
ES6转换成ES5
月影
2019-11-19
阅读 2 分钟
9.3k
ECMAScript 6(ES6)的发展速度非常之快,但现代浏览器对ES6新特性支持度不高,所以要想在浏览器中直接使用ES6的新特性就得借助别的工具来实现。
微信小程序日期选择器(官方picker-view改进版)
月影
2019-08-23
阅读 1 分钟
13.9k
产品锦鲤说官方的日期选择器用户体验不好!滑到今天以后应该不能滑动了,而不是跳到1949年去了。能不能改?当然不能改了,这是官方的,我们改不了。。。。
Web前端开发流程
月影
2019-03-15
阅读 2 分钟
8.7k
开发前准备了解需求参加需求、交互、视觉会议,了解产品设计和项目成员。了解产品面向的设备和平台。了解产品对兼容性的要求以及是否采用响应式设计等。分析需求按需求结合现有技术,提出疑问和见解。提出可能存在的问题(技术实现,性能问题等),协商解决方案(如优雅降级、渐进增强)并达成共识。提出当下已掌握新技...
Web前端开发标准规范
月影
2019-02-18
阅读 8 分钟
10.1k
web前端开发规范的意义提高团队的协作能力提高代码的复用利用率可以写出质量更高,效率更好的代码为后期维护提供更好的支持一、命名规则命名使用英文语义化,禁止使用特殊字符,禁止使用拼音,禁止使用中英文混合!项目、目录、html/css/js等文件命名全部采用小写方式, 以下划线分隔。eg:my_project_namehtml/css/js文...
微信小程序之选项卡
月影
2018-09-06
阅读 3 分钟
10.3k
选项卡随处可见,微信小程序中也不例外,下面来写一个简单的小程序选项卡 思路 之前写过基于swiper的选项卡,在小程序中有swiper组件,毫无疑问这里要用到swiper组件 小程序中的swiper组件有个问题就是不能根据内容自适应高度,所以要通过wx.getSystemInfoSync获取设备高度设置swiper高度 小程序中的swiper组件中swiper-...
微信小程序之生成图片保存到相册
月影
2018-09-05
阅读 12 分钟
21.6k
电商项目中需要将自己小店的商品带上自己的小程序码生成海报,保存到本地,然后分享到万能的朋友圈,QQ空间,微博等等来广而告之...如下图,三种海报格式轮播展示,左滑右滑切换到海报,点击下面保存图片按钮,将当前海报保存到手机相册
微信小程序之判断页面滚动方向
月影
2018-08-29
阅读 2 分钟
11.6k
需求 微信小程序中如果判断页面滚动方向? 解决方案 1.用到微信小程序API 获取页面实际高度 nodesRef.boundingClientRect([callback])监听用户滑动页面事件onPageScroll。 2.获取页面实际高度 {代码...} {代码...} 3.监听用户滑动页面事件 {代码...} 参考:微信小程序如何判断页面上下滚动
微信小程序之圆形进度条(自定义组件)
月影
2018-02-09
阅读 8 分钟
21.3k
打开微信开发者工具创建一个项目,新建目录 components 与 pages 目录同级在components中新建一个目录circle在circle中新建 Component 命名为 circle 自动生成 json wxml wxss js 4个文件。结构如下:
微信小程序之圆形进度条
月影
2018-02-08
阅读 4 分钟
39.5k
一个盒子包裹2个canvas以及文字盒子;盒子使用相对定位作为父级,flex布局,设置居中;一个canvas,使用绝对定位作为背景,canvas-id="canvasProgressbg"另一个canvas,使用相对定位作为进度条,canvas-id="canvasProgress"代码如下:
使用html2canvas实现浏览器截图
月影
2018-01-24
阅读 3 分钟
10.1k
html2canvas可以通过纯JS对浏览器端经行截屏,但截图的精确度还有待提高,部分css不可识别,所以在canvas中不能完美呈现原画面样式
10行js代码搞定滚动公告
月影
2017-12-05
阅读 2 分钟
19.2k
需求 最近项目中需要实现公告栏滚动显示效果如下 解决方案 1、 HTML 先建一个div层作为公告显示区,里面包裹一个公告列表(ul); {代码...} 2、 CSS 固定公告栏显示区域的高度(35px),每条公告信息(li)的高度也必须是这个高度(我这里偷懒就用了行高),后面js中还要用到这个值。 {代码...} 3、 JavaScript 封装函数 no...
前端Bug解决方案
月影
2017-09-11
阅读 4 分钟
7.2k
没错!我正在写bug呢!不管你是小白还是大牛,写bug无可避免,遇到bug怎么办?别慌!毛主席教导我们“战略上藐视BUG,战术上重视BUG”!前端遇到的bug无非就三个方面结构层(HTML),表现层(CSS),行为层(JavaScript)。
animationend 事件
月影
2017-09-08
阅读 2 分钟
8.3k
CSS动画事件 CSS 动画播放时,会发生以下三个事件: {代码...} 注意标准语法都是小写,兼容大小写驼峰写法 {代码...} 语法 {代码...} 举例 {代码...} animationend 事件
单页面官网-平滑过渡到指的锚点
月影
2017-08-25
阅读 5 分钟
7.7k
特点 单页面官网--不是传说中的单页面应用!固定顶部,点击导航平滑过渡到指定锚点,鼠标上下滚动到锚点位置导航随之切换如:考拉微课 HTML布局 {代码...} CSS样式 导航栏的样式要注意,这给当前样式单独做了一个DIV层,绝对定位,鼠标移动到哪个导航,这个当前样式层就移动到这个导航菜单上。 {代码...} JS方法封装 JS...
基于swiper的Tab选项卡
月影
2017-08-18
阅读 5 分钟
21.6k
选项卡五花八门,今天又要用到选项卡,首选swiper! 一、HTML布局 根据swiper官网的要求来class命名滑块。 {代码...} 二、CSS样式 随便写写,根据使用场景调整。(PS:推荐一个在线美化工具) {代码...} 三、Js封装 自己封装的选项卡函数swiperTab.js {代码...} 四、Js调用 首先引入相关js {代码...} 前端小白刚学JS。不...
5行js代码搞定导航吸顶效果
月影
2017-08-17
阅读 2 分钟
21k
一、HTML布局 首先写HTML布局 {代码...} 二、CSS样式 给点简单的样式 {代码...} 三、JS代码 1、面向过程 直接编写5行代码搞定 {代码...} 2、面向对象 JS改进,封装成吸顶函数 ceiling.js 方便以后直接Ctrl+C,Ctrl+V 封装方法 {代码...} 调用方法 {代码...} 这是最简单版本,欢迎大家在此基础上改进。 延伸 {代码...} {...
jq自定义弹窗
月影
2017-08-10
阅读 2 分钟
7.6k
需求 做一个通用的弹出层提示框。要求:1.位置上下左右居中,2.只需要引入一个js文件,调用一下。不要html结构,不要样式表。 解决方案 方法封装 pupopTip.js文件 {代码...} 方法调用 {代码...} 效果图 完整代码
移动端网页怎么做?
月影
2017-08-07
阅读 5 分钟
19.3k
移动端网页最大的特点是什么?自适应不同尺寸的屏幕!高大上的叫法:响应式!知道了自适应网页怎么做岂不是能很好解决问题了?那么自适应网页怎么做呢?网上关于这方面的文章有很多,我简单的整理一下。
一道三目运算测试题引发的思考
月影
2017-08-07
阅读 1 分钟
2k
三目运算: condition ? expr1 : expr2 condition为真 执行 expr1 ;condition为假执行 expr2
微信小程序组件swiper结合模板的使用
月影
2017-06-16
阅读 2 分钟
7.2k
在组件文件夹components下新建一个模板文件swiper.wxml。template 使用name属性,作为模板的名字(模板的唯一标识符,使用时用is属性声明)。然后在<template/>内定义swiper代码片段 ,代码如下:
微信小程序picker组件遇到的问题与解决方案
月影
2017-06-15
阅读 6 分钟
30.5k
当然先看官方文档 picker说明搞清楚基本概念“从底部弹起的滚动选择器,现支持三种选择器,通过mode来区分,分别是普通选择器,时间选择器,日期选择器,默认是普通选择器。”几个主要属性:range: 选取范围,数据类型为Array / Object Array,mode为 普通选择器 时,range 有效;value: value 的值表示选择了 range 中...