3月 312017
 

placeholder是h5中新增的一个属性。比如input,textarea。但在低版本的浏览器中,不支持placeholder属性。还有可能存在样式的问题(placeholder时候的颜色和它所属的对象颜色一样)。这里就总结一下placeholder的兼容性问题的处理方法。

对于显示对象,对于同一个显示对象在不同地方的样子。对于是否支持,支持到什么程度。最直接的方式是我们是通过比较,通过眼睛来看出来的。需要在多环境(各种浏览器以及版本),多次数的测试下比较看出来的。然后总结出规律。

对于placeholder,有以下几点:
1,焦点进入。清除placeholder效果(就是placeholder提示语去掉)。
2,焦点出去。如果输入框中有其他文字则保持。如果输入框中没有文字,则出现placeholder提示语,并且颜色为placeholder该有的颜色。
以上两点输入框文本的颜色以及placeholder的颜色都各自有切换。
Continue reading »

2月 222017
 

正如题目。在移动端布局的时候,这个很有用(不用js的情况下)。有这样一个场景:
有若干张图片,图片的宽高各不相同(如果图片宽高相同就好搞了哈),让这些图片显示在网页中。要求每行显示三张(照片横向,纵向有一定的间隔,且距离父容器的间隔为0),显示的高度等于宽度,并且让图片在容器中居中显示。另外,在图片上浮动显示照片的介绍以及类型等(浮动几个小span。这个是前边要求额外的。)。

下边,这些问题先一个一个的解决。 Continue reading »

2月 202017
 

在ios下,html5的video标签播放时候总会先全屏播放。这个问题很恼火,体验很差。所以找了个黑科技。那就点开下边的链接。
https://github.com/bfred-it/iphone-inline-video

貌似,video里边跟playsinline就够了。播放状态可以用addEventListener。比如播放完毕,侦听’ended’的

看看知乎上怎么说的哈。https://www.zhihu.com/question/21094425

这个问题解决的同时,还可以处理控件问题。ios的视频播放控件太丑太丑了。于是,用css写浮动,利用上边的方法,可以实现非全屏状态下的控件。

本来,为了实现控件的替换。想到用canvas画图的方式来完成。不过,有了上边的方法,canvas画图的方式就丢弃了。请看这里canvas画图。
http://www.cnblogs.com/zhangwenjiajessy/p/6158131.html

1月 182017
 

话说,css就是那个层叠样式表。这个咋跟动画扯上关系了。其实,css早就可以实现动画的效果。

这里有demo可以喵喵:
https://tympanus.net/Development/HoverEffectIdeas/index.html

https://tympanus.net/Development/CreativeLinkEffects/

虽然很美好,可是css的兼容性问题从来就没离开过。这里就不管这些了。常见的动画效果改变有颜色,位置,scale,透明度,宽,高等等。下边就列出一些其api的,不会说其用法。

Continue reading »

6月 122016
 

input有maxlength属性,可以控制输入的最大长度。而textarea没有。这个时候,只能通过手动的形式来限制textarea的输入长度。既然手动形式,那么我们就从用户的操作出发,也就是用户的键盘输入操作。可有时候,用户不一定通过键盘输入,有时候是通过复制粘贴来实现。那么侦听什么事件比较好呢。

请看这篇文章:http://blog.csdn.net/sunlylorn/article/details/6123355

为了照顾兼容性。ios下app走的都不是ie这条路。可以不必要加那些if。为了其它端。比如网页端等,还是加上了。在这里用onpropertychange,onchange就可以了。 Continue reading »

6月 122016
 

在进行输入操作的时候,就会和光标和键盘打交道。一个体验好的APP,光标和键盘的表现也会非常好。比如,有的app账号只能是手机号码。这个时候,弹出的键盘的默认输入法就是数字的。想象下这样一个场景,用户点击编辑按钮,进入编辑页面。这个时候,编辑页面应该怎么表现呢。
1,光标停留在输入框(input或textarea)中,并在输入框value的末尾。
2,弹出键盘。

先说第一个问题的解决,读别人的博客,然后跟着做。然后看效果。关于这个问题的相关博客。
http://www.zhangxinxu.com/wordpress/2010/04/%E6%96%B0%E6%B5%AA%E5%BE%AE%E5%8D%9A%E6%8F%92%E5%85%A5%E8%AF%9D%E9%A2%98%E5%90%8E%E9%83%A8%E5%88%86%E6%96%87%E5%AD%97%E9%80%89%E4%B8%AD%E7%9A%84js%E5%AE%9E%E7%8E%B0/
http://www.jb51.net/article/26527.htm

在看第二个问题。
http://ask.dcloud.net.cn/article/513
参考文章中用的是input,用textArea也可以的。我测试的是ios机器。android机器没测试。想应该也是可以的。也许会出现一些bug。比如弹出键盘后,会马上消失不见。感觉文章中所说方案不怎么靠谱,因为不是百分百能弹出键盘。多次试验,将setTimeout的时间设置长一点,会好很多。

6月 122016
 

断断续续的写了好几篇。到现在,还没写成一连串的完整APP的创建过程。这中间,也听说了一些其他框架,比如apicloud , framework7,sui等。太多框架,众说纷纭。有时候,也难以让人抉择。不过,自己先接触的mui框架,也看了下其他框架。表面看了下,都能实现ui这些功能。既然,mui已经有一定基础了,且能做出东西了,就还是用mui吧。

现在回归正题。app页面的基本组成。app页面一般有页头,页身,页底组成。页头和页底一般都由导航nav(也可以叫菜单menu)组成。再啰嗦一点,页头的导航一般是滑块slider导航。是输入该页面的。而页底的导航是输入很多页面的,也就是很多页面都会存在底部的导航。 如下图所示:

Continue reading »

5月 272016
 

h5+app,抛开大的方面,比如结构,功能这些。h5+app,其实主要是html + js + css。这里说主要,那另外的就是ajax,native.js等这些了。而mui框架,帮我们封装实现了一个一个比较实用的组件。比如:图片轮播,图文列表,侧滑菜单,折叠面板等。我们只需要按照规范,引用class就可以了。也可以在此基础上修改。那如果,不用这些呢。用js,css自己写呢。这个当然是可以的。可是,在时间如此珍贵的时代,你还愿意花更多的时间来写吗。即使自己写,写出来的效果能有mui封装的好吗。如果,虽然。如果你时间足够多,当然是可以花些时间去研究js,css。而不必直接就开始用jquery,mui这些。好吧,想要快速的实现效果,我们还是能用,恰到好处的用mui框架里的组件吧。

第三方的框架还是很多的。http://amazeui.org/widgets/slider# 还有jscroll等。时间不多,不能每个项目都要去造轮子。

mui的使用文档:
1,老版本。http://dcloudio.github.io/mui/javascript/
2,新版本。http://dev.dcloud.net.cn/mui/ui/
某些组件,老版本讲的比较详细。

最常用,最实在的几个组件,这里重复一下,自己也跟着学习,加深下印象。

1,轮播图片。http://dev.dcloud.net.cn/mui/ui/#gallery 这里讲的通俗易懂。一看就晓得怎么用了。

5月 262016
 

用框架做事情,很容易就不自觉走进坑中。如何面对以及处理这些坑,是个路漫漫其修远兮的过程。需要去尝试和记录。还有,怎么去描述这些坑,专业术语怎么表达,这个是重点。毕竟,很多时候,需要去问度娘等。如果都不知道怎么描述,怎么找答案呢。下边一点一点的总结我所遇到的问题。这些问题导致体验不完美或出故障。

1,冥冥代码是对的。图片就是不显示或代码根本就不是按代码所要展示的效果走。HBuilder中,有一个功能,为了使得打的包足够小,会对资源关系进行优化。因为在你的项目中,可能存在的图片或js或xml等不是项目最终需要的。这个时候,你通过优化功能去掉了页面的引用关系。后来你改代码了,引用了原来图片或资源。这个时候你觉得是对的,路劲写的也没错,为什么就没效果呢。这个时候,你就需要重新构建引用关系。并在代码视图中的unpackage包中,去掉之前删除过的引用。最后这一句很重要。

2,页面左右策划的时候,冥冥不想划出可视区域。划出可视局域后,有一块白屏。却偏偏划出去白屏了。这个时候,是设置侧滑返回关闭窗口了的功能。只需要将其设置为none即可。就是popGesture这个参数。至少我是这样的。

3,页面滑动后出现下沉的现象。创建webview的时候,你可以设置webview距离顶部或底部的距离。当你设置了到顶部有一定距离后,show出来的时候就会出现下沉。敲这篇文字的时候,我也在想解决这个问题。得去弄懂设置了顶部距离后,究竟做了什么。比如设置了页面的浮动top或padding什么的。

网站地图