分类：一些积累

另外，需要满足如下条件sticky才能生效：
使用条件：
1、父元素不能overflow:hidden或者overflow:auto；
2、必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
3、父元素的高度不能低于sticky元素的高度
4、sticky元素仅在其父元素内生效

标签 position sticky, sticky兼容性, sticky失效

一些积累

不能正常显示svg的解决方案

文章作者由Frank She
发布日期 2019-02-27

原本用data:img/svg+xml;utf-8,<svg …. 这种写法，将svg作为css引入的背景图，既矢量，又能比base64更小，本来是不错的方案。但升级到最新Chrome (72.0.3626.109) 发觉竟不能正常显示了。

Google一翻，在Stackoverflow 找到了原因及解决方案：需要将<svg/> 转换为URL编码(URL encode)。也即原来的写法，
[cc lang=”css”]data:image/svg+xml;utf8,<svg width=”40″ height=”38″ xmlns=”http://www.w3.org/2000/svg”><g fill=”#C7D5FF” fill-rule=”evenodd”><path d=”M28.804 11.071h9.827a1.321 1.321 0 1 1 .001 2.642h-10.98L21.26 36.525a1.343 1.343 0 0 1-.125.3 1.319 1.319 0 0 1-1.158.668 1.345 1.345 0 0 1-1.159-.67 1.319 1.319 0 0 1-.133-.332L12.3 13.713H1.321a1.321 1.321 0 1 1 0-2.642h9.838L6.792 2.415a1.316 1.316 0 0 1 .6-1.773 1.337 1.337 0 0 1 1.784.591l4.268 8.46 5.351-8.488A1.335 1.335 0 0 1 20.682.7c.19.117.345.278.453.468l5.373 8.523 4.266-8.459a1.337 1.337 0 0 1 1.795-.59 1.316 1.316 0 0 1 .6 1.773l-4.365 8.656zm-8.829-6.756l-4.257 6.756h8.516l-4.259-6.756zm-4.908 9.398l4.91 17.524 4.91-17.524h-9.82z”/><path d=”M18.924 36.983L.269 13.2a1.312 1.312 0 0 1-.078-1.511L6.854 1.124A1.336 1.336 0 0 1 7.984.5h23.985c.458 0 .885.234 1.13.621l6.663 10.568c.296.47.265 1.075-.078 1.511L21.029 36.982a1.339 1.339 0 0 1-2.105.001zM2.945 12.309l17.032 21.71 17.032-21.71-5.778-9.164H8.722l-5.777 9.164z”/></g></svg>[/cc]

需要改成：
[cc lang=”css”]data:image/svg+xml;utf8,<svg%20width%3D”40″%20height%3D”38″%20xmlns%3D”http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg”><g%20fill%3D”%23C7D5FF”%20fill-rule%3D”evenodd”><path%20d%3D”M28.804%2011.071h9.827a1.321%201.321%200%201%201%20.001%202.642h-10.98L21.26%2036.525a1.343%201.343%200%200%201-.125.3%201.319%201.319%200%200%201-1.158.668%201.345%201.345%200%200%201-1.159-.67%201.319%201.319%200%200%201-.133-.332L12.3%2013.713H1.321a1.321%201.321%200%201%201%200-2.642h9.838L6.792%202.415a1.316%201.316%200%200%201%20.6-1.773%201.337%201.337%200%200%201%201.784.591l4.268%208.46%205.351-8.488A1.335%201.335%200%200%201%2020.682.7c.19.117.345.278.453.468l5.373%208.523%204.266-8.459a1.337%201.337%200%200%201%201.795-.59%201.316%201.316%200%200%201%20.6%201.773l-4.365%208.656zm-8.829-6.756l-4.257%206.756h8.516l-4.259-6.756zm-4.908%209.398l4.91%2017.524%204.91-17.524h-9.82z”%2F><path%20d%3D”M18.924%2036.983L.269%2013.2a1.312%201.312%200%200%201-.078-1.511L6.854%201.124A1.336%201.336%200%200%201%207.984.5h23.985c.458%200%20.885.234%201.13.621l6.663%2010.568c.296.47.265%201.075-.078%201.511L21.029%2036.982a1.339%201.339%200%200%201-2.105.001zM2.945%2012.309l17.032%2021.71%2017.032-21.71-5.778-9.164H8.722l-5.777%209.164z”%2F><%2Fg><%2Fsvg>[/cc]

进阶解决方案

国外小伙对于sass处理URL encode写了一个很赞的function, 完美。
[cc lang=”css”]
// Replace letters
@function str-replace($string, $search, $replace: ”) {
$index: str-index($string, $search);

@if $index {
@return str-slice($string, 1, $index – 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
}

@return $string;
}

// Encode symbols
@function url-encode($string) {
$map: (
“%”: “%25”,
“<": "%3C", ">“: “%3E”,
” “: “%20”,
“!”: “%21”,
“*”: “%2A”,
“‘”: “%27”,
‘”‘: “%22”,
“(“: “%28”,
“)”: “%29”,
“;”: “%3B”,
“:”: “%3A”,
“@”: “%40”,
“&”: “%26”,
“=”: “%3D”,
“+”: “%2B”,
“$”: “%24”,
“,”: “%2C”,
“/”: “%2F”,
“?”: “%3F”,
“#”: “%23”,
“[“: “%5B”,
“]”: “%5D”
);

$new: $string;

@each $search, $replace in $map {
$new: str-replace($new, $search, $replace);
}

@return $new;
}

// Format the SVG as a URL
@function inline-svg($string) {
@return url(‘data:image/svg+xml,#{url-encode($string)}’);

[/cc]
> github url

再进一步

据张鑫旭博文介绍，不用全部标点都转码，只需要将关键的几个转换即可正常显示，部分转码可使文件更小，故优化方案如下，实践可行。

[cc lang=”css”]
// Replace letters
@function str-replace($string, $search, $replace: ”) {
$index: str-index($string, $search);

@if $index {
@return str-slice($string, 1, $index – 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
}

@return $string;
}

// Encode symbols
@function url-encode($string) {
$map: (
“%”: “%25”,
“<": "%3C", ">“: “%3E”,
“!”: “%21”,
“*”: “%2A”,
“‘”: “%27”,
‘”‘: “%22”,
“#”: “%23”);

$new: $string;

@each $search, $replace in $map {
$new: str-replace($new, $search, $replace);
}

@return $new;
}

// Format the SVG as a URL
@function inline-svg($string) {
@return url(‘data:image/svg+xml,#{url-encode($string)}’);

[/cc]

标签 Chrome不能显示svg, data:image/svg, svg, svg+xml

一些积累技术收录

jQuery对SVG用class()方法失效的解决方案

文章作者由Frank She
发布日期 2019-01-20

JQuery (版本3.0以下) 不能直接用addClass()或removeClass()或toggleClass()来控制SVG。但.attr() 方法支持SVG的类名控制:

// 代替 .addClass("newclass")
$("#item").attr("class", "oldclass newclass");
// 代替.removeClass("newclass")
$("#item").attr("class", "oldclass");


或者你不想用jQuery，可尝试如下原生写法:

var element = document.getElementById("item");
// 代替 .addClass("newclass")
element.setAttribute("class", "oldclass newclass");
// 代替 .removeClass("newclass")
element.setAttribute("class", "oldclass");

标签 class() svg, jquery svg, svg

一些积累

纯CSS实现券的锯齿效果

文章作者由Frank She
发布日期 2019-01-17

如图示，这种卡券的锯齿效果，可用css radial-gradient 的 circle属性来实现。

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”ZVZZQY” default_tab=”css,result” user=”sheshihui”]See the Pen coupon style by Frank She (@sheshihui) on CodePen.[/codepen_embed]

一些积累

微信小程序笔记

文章作者由Frank She
发布日期 2019-01-16

参考url
https://www.cnblogs.com/pansidong/articles/7563155.html
https://www.jianshu.com/p/00724ab30c89
https://www.cnblogs.com/mhxy13867806343/p/6265159.html

组件的样式只能定义在组件对应wxss
data:image/svg+xml;base64,{} 可通过这个方式引入svg图标，
可在css用data:image/svg+xml;utf-8,{svg code}引入svg图标
作为组件，
1. js须有Component构造器参考 https://blog.csdn.net/u014490083/article/details/81026601,
2. json里边有
{“component”: true}

关于跳转

页面跳转用 js用 navigateTo https://developers.weixin.qq.com/miniprogram/dev/api/wx.navigateTo.html?search-key=navigateTo

标签用 navigator https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html

https://blog.csdn.net/sdlklyg/article/details/79246720

Swiper 与 nav, https://blog.csdn.net/li06359147/article/details/79184587

页面传递参数到组件 http://www.cnblogs.com/wind-wang/p/10050380.html
在组件设定 properties

在父页面设定data-{}

表单的placeholder需要用特别的类设定 placeholder-class=”input-placeholder”

Textarea在iOS和安卓下表现不一，解决方法是用js判断OS再分别给不同的class…
参考https://www.jianshu.com/p/af99c8558c3a
更多textarea的bug https://www.cnblogs.com/growupup/p/9799507.html

自定义导航栏 https://blog.csdn.net/qq_33744228/article/details/83656588
Swiper + Scroll-view 会触发一个莫名的最高层级的bug, 例如同级有个一浮动（fixed)的按钮，将会被遮挡，待缓动时间过后才能回复正常。动态给按钮加一个transtion, translate3d 可修正问题，参考运营小程序首页
自带的button标签，会用:after定义有边框
暫不支持css @supports 語法.. https://developers.weixin.qq.com/community/develop/doc/0006661cce0898698077eba9951000?highLine=css
有关帧动画, 小程序不支持循环gif图（只播放一次），而css3 侦动画又不支持css直接读本地图片… 据闻（未验证）canvas可读本地图片，最终运营小程序用的是 cdn图片作为背景图。

工具

参考 https://www.jianshu.com/p/00724ab30c89 为webstorm设定代码高亮支持

一些积累

svg图标处理的在线工具推荐

文章作者由Frank She
发布日期 2018-11-27

svg图标处理时，个人会习惯使用如下工具，且都是在线的(正常点的，或者说正版前端应该会用gulp之类吧?)

https://jakearchibald.github.io/svgomg/
爱死这个在线工具了，你可以直接将sketch或ps里边的svg代码，直接复制粘贴到站点，然后就可以生成一个干净的svg文件，且多选项可按需配置。当然你也可以直接将下载好的svg拉到这个在线站点来优化。

https://icomoon.io/app/
早期是用www.iconfont.com管理iconfont的，但…谁用谁知道，反正我很多年没使用了，不知后面是否已优化。而当前推荐的这个站点，管理iconfont棒棒的，当然管理svg也是同样很赞。

标签 icomoon, svg, svgomg

一些积累

小程序sass转wxss

文章作者由Frank She
发布日期 2018-11-27

wxss其实基本就是css, 而已习惯用sass写样式的我们，再一行一行，原始地敲css，是件很奇特的事。就像明知道可以发微信，但还要在邮局发电报一样…故要写小程序，环境必不可少的是将sass转为wxss。

思路

先生成正常的css, 再将css转为wxss格式
将px转为rpx

实现

可用gulp rename工具来将css直接重命名为wxss

var rename = require('gulp-rename')
...pipe(rename(function (path) {
    path.extname = ".wxss";
}))

可用gulp-px2rpx实现px单位自动转为rpx

var px2rpx = require('gulp-px2rpx');
...pipe(px2rpx({
    screenWidth: 750, // 设计稿屏幕, 默认750
    wxappScreenWidth: 750, // 微信小程序屏幕, 默认750
    remPrecision: 6 // 小数精度, 默认6
}))

Done, 就是这么简单…

标签 css转wxss, gulp, px转rpx, sass, sass转wxss, scss, wxss, 小程序