分类: 一些积累

共16项

小程序自定义tabbar动态更新购物车数量

小程序自定义tabbar动态更新购物车数量,用常规的组件间传值方法似是不可行。实践分两步可行: 每一步,加入购物车成功时定义缓存Storage值,如 let _num = wx.setStorageSync(‘CART_COUNT’, num); this.setData({cart_count: _num}); 组件内初始读取CART_COUNT值并显示;

WordPress 多语言包处理方法

中文版产品转换支持多语言处理方案: Php里用 _e(),  __()等方法且中文写描述文字相关;js用到的文案用wp_localize_script() 方法统一在php设定对应变量; 对应__e,__()里的中文补充英文译文; 运行gulp的gulp-wp-pot模块,将php里所有_e(), __()等写法的字段抽离生成 .pot文件; 用Poedit将.pot文件生成.po文件,并翻译完整中文语言包文件(xx_ZH_CN.po); 记事本打开xx_ZH_CN.po 手动将(msgid字段)混合中文的源句子里的中文去掉;同时php里同样将_e(), __()里的中文去掉只保留英…

暗黑模式实现方式

通过sass(scss)结合css变量简易实现暗黑显示模式: Sass引入为包含css变量的参数, 如body{ font-color: $bfc; } 参数:$bfc: var(—wbBfc, #666); 通过js在外层,如body toggle class “wb-dm”, 来控制暗黑与正常模式的切换; 那么暗黑下的css变量改变数值即:.dm{–wbBfc: #ccc;…} 实践例子参考https://eyes.demo.wbolt.com/

position sticky 失效 – 有点另类的写法

一开始在sass这样写的,gulp给我过滤掉了-webkit-sticky… 然后Chromre有效,但Safari失效。 .sticky{ top:0; position: -webkit-sticky; position: sticky; } 直接用position: -webkit-sticky; Safari好了,但Chrome失效了… 网上找了下,解决方法竟然是将前辍写法写最后(如下),所以说有点另类哇. .sticky{ top:0; position: sticky; position: -webkit-sticky; } 另外,需要满足如下条件stick…

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

原本用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=…

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

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…

纯CSS实现券的锯齿效果

如图示,这种卡券的锯齿效果,可用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]

微信小程序笔记

参考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构造器 参考 ht…

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

svg图标处理时,个人会习惯使用如下工具,且都是在线的(正常点的,或者说正版前端应该会用gulp之类吧?) https://jakearchibald.github.io/svgomg/ 爱死这个在线工具了,你可以直接将sketch或ps里边的svg代码,直接复制粘贴到站点,然后就可以生成一个干净的svg文件,且多选项可按需配置。当然你也可以直接将下载好的svg拉到这个在线站点来优化。 https://icomoon.io/app/ 早期是用www.iconfont.com管理iconfont的,但…谁用谁知道,反正我很多年没使用了,不知后面是否已优化。而当前推荐的这个站点,管理i…

小程序sass转wxss

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单位自动转…

加载更多
我们将24小时内回复。
2023-05-31 04:24:08
您好,有任何疑问请与我们联系!
您的工单我们已经收到,我们将会尽快跟您联系!
取消

选择聊天工具: