- iphoneX兼容之自定义底部菜单
当我们需要自定义底部导航栏时 首先要解决iphoneX的底部大横条对这个兼容 通常不设置兼容 都会被挡住 如何编写 在你要编写的底部菜单中插入 样式 [代码]padding-bottom[代码][代码]: calc(env(safe-area-inset-[代码][代码]bottom[代码][代码]) / [代码][代码]2[代码][代码]) 即可兼容 [代码] [代码] 例如:css中插入[代码] [代码]@supports ([代码][代码]bottom[代码][代码]: constant(safe-area-inset-[代码][代码]bottom[代码][代码])) or ([代码][代码]bottom[代码][代码]: env(safe-area-inset-[代码][代码]bottom[代码][代码])) {[代码][代码] [代码][代码].fixed-wrap {[代码][代码] [代码][代码]height[代码][代码]: calc(env(safe-area-inset-[代码][代码]bottom[代码][代码]) / [代码][代码]2[代码][代码]);[代码][代码] [代码][代码]width[代码][代码]: [代码][代码]100%[代码][代码];[代码][代码] [代码][代码]}[代码] [代码] [代码][代码].fixed-pay {[代码][代码] [代码][代码]padding-bottom[代码][代码]: calc(env(safe-area-inset-[代码][代码]bottom[代码][代码]) / [代码][代码]2[代码][代码]);[代码][代码] [代码][代码]}[代码] [代码]}[代码]其中 [代码]env(safe-area-inset-[代码][代码]bottom[代码][代码]) 是计算兼容的高度 通常一半即可 [代码] calc 是计算css 你也可以加入高度 假设有第二层 底部固定栏【即底部导航栏上面还有一层固定栏】 可如下编写 view.footer { bottom: calc(100rpx + env(safe-area-inset-bottom)); } 这样轻轻松松解决兼容 不需要写js代码 <-------------大横条-------------> [图片]
2019-05-28 - 微信朋友圈选图效果
中秋快乐,帮社区里的小伙伴写的选图效果,仿造的微信朋友圈选图,长按拖动排序主要是用交互监听来实现的。还有几个需要处理的地方。另外在真机上的动画速度总感觉快那么一丢丢。没做预览图,详情见代码片段咯。安卓机效果没试过。。 今天是9月23,这两天接受定制改动~ 第一次发经验分享。。轻点喷。。 哦,对了,这里 wx.createSelectorQuery 有个bug。。如果选择的基础库版本在2.0.9以上,第一次打开开发者工具,要先直接点一次编译,不然会出错。。真机上没问题 代码片段:wechatide://minicode/RFLmzDmL7I2a 有小伙伴反馈,在片段上面增加内容会乱位,是因为没计算顶部偏移量,方便懒人,完善了下 新的片段:wechatide://minicode/fOTEM3mI7l3B 终于拿到安卓机器试了,果然卡得很。。要控制频率。这很尴尬,太频繁的话,安卓会卡,太不频繁呢,刚开始移动那阵子会卡。。有同学反馈,说点快了会出问题,于是又加了点击频率的限制 现在的代码片段:wechatide://minicode/xBDdCom17R3c(要重新拿安卓机测试了再看看。。) 附上gif: [图片]
2018-10-24