41酱的小草莓

导航

2020年1月15日 #

关于背景和边框颜色重叠的解决办法

摘要: 如图为预期效果: 目前效果: 目前代码: 1 background: #1184e1; 2 border: 3px solid rgba(160,206,243,0.4); 于是我怀疑背景颜色#1184e1和边框颜色#a0cef3出现了重叠效果。 后发现解决办法十分简单,添加background-c 阅读全文

posted @ 2020-01-15 15:55 41酱的小草莓 阅读(1076) 评论(0) 推荐(0) 编辑

2019年12月17日 #

带圆形进度条按钮的banner图

摘要: 清除样式代码: 1 * { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-b 阅读全文

posted @ 2019-12-17 16:24 41酱的小草莓 阅读(350) 评论(0) 推荐(0) 编辑

数字滚动效果

摘要: 刚进入页面时,数字有一个从0开始的累加效果。速度足够快的时候,看起来就像数字滚动。 html代码: 1 <head> 2 <meta charset="UTF-8"> 3 <meta name="viewport" content="width=device-width, initial-scale 阅读全文

posted @ 2019-12-17 15:22 41酱的小草莓 阅读(754) 评论(0) 推荐(0) 编辑

2019年12月3日 #

uniapp实现图片预览效果

摘要: uni有一个自带的previewImage方法,是预览图片的效果,但current属性在h5下传入Number不兼容,所以使用数组的方式传入。 把预览图片封装成一个方法: 1 // 图片预览 2 const imgPreview = (list, idx) => { 3 // list:图片 url 阅读全文

posted @ 2019-12-03 12:01 41酱的小草莓 阅读(19804) 评论(0) 推荐(0) 编辑

ios下输入框的适配问题

摘要: 1. 黄色背景 在ios系统下input、textarea、select自动填充内容后,会出现黄色的背景: 解决办法:用足够大的box-shadow遮盖背景 1 input:-webkit-autofill, 2 textarea:-webkit-autofill, 3 select:-webkit 阅读全文

posted @ 2019-12-03 11:27 41酱的小草莓 阅读(305) 评论(0) 推荐(0) 编辑

关于刘海屏底部的适配问题

摘要: 在iPhone X及以上的刘海屏下适配,一般会用媒体查询将底部流出34px的空白高度。 1 @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 阅读全文

posted @ 2019-12-03 10:26 41酱的小草莓 阅读(775) 评论(0) 推荐(0) 编辑

2019年12月2日 #

日期倒计时

摘要: 根据给定的结束日期实现“天:时:秒”的倒计时效果 使用uni扩展的countdown插件,加以修改。将模板uni-countdown.vue引入到component中使用: 1 <template> 2 <view> 3 <div v-if="d == '000' && h == '00' && i 阅读全文

posted @ 2019-12-02 17:21 41酱的小草莓 阅读(285) 评论(0) 推荐(0) 编辑

html标签反转义

摘要: 情景是这样的(小程序或vue下): 优惠活动的详情页是通过从数据库拿到数据动态生成的,数据库返回的页面结构数据content: "&lt;div class=&#39;cont-part&#39;&gt;&lt;div class=&#39;cont-title&#39;&gt;&lt;/div&g 阅读全文

posted @ 2019-12-02 12:07 41酱的小草莓 阅读(1154) 评论(0) 推荐(0) 编辑

用于小程序中的骨架屏

摘要: 基于uni-app的一个骨架屏插件。 在使用的时候可以直接在components中引入组件quick-skeleton.vue。组件代码如下: 1 <template> 2 <view 3 v-show="show" 4 :style="{ 5 width: systemInfo.width + ' 阅读全文

posted @ 2019-12-02 11:24 41酱的小草莓 阅读(1357) 评论(0) 推荐(0) 编辑

2019年11月21日 #

scroll及相关属性

摘要: 1. 获取滚动条的高度 Safari中使用的是 window.pageYOffset IE中是 document.body.scrollTop 以及 document.documentElement.scrollTop; 所以兼容性的写法是: 1 var scrollTop = document.d 阅读全文

posted @ 2019-11-21 14:22 41酱的小草莓 阅读(257) 评论(0) 推荐(0) 编辑