CSS
文章平均质量分 74
自酌一杯酒
欢迎大家访问我的个人博客:https://www.clluo.com
展开
-
小程序转盘抽奖组件(使用简单)
项目地址点我查看完整代码效果图使用方式引入组件 .json{ "usingComponents": { "turnplate-lottery": "/components/turnplate-lottery/index" }}使用组件 .wxml<turnplate-lottery id="turnplate" list="{{prizeList}}"></turnplate-lottery><button catchtap="onSta原创 2021-11-12 14:28:34 · 1834 阅读 · 0 评论 -
图解转盘抽奖布局样式,以小程序为例
目前抽奖最常见的两种:九宫格抽奖 和 转盘抽奖,但转盘抽奖的大多是采用的是将做好的图放在页面上,如果需要变动奖池里面的奖品或数量,就会让设计师重新出一张图片。分享我自己在自定义转盘抽奖的样式布局思路,只是样式布局,没有功能实现;布局思路整个转盘抽奖布局分为两部分:底部转盘背景图 和 奖品内容布局一. 底部转盘背景图1:用canvas画个转盘出来(我采用的这种,自定义更高),再转为临时路径或base64数据,放到底部背景图上;2:用默认的转盘背景图,放到底部背景图上;二. 奖品内容布局首先需要原创 2021-03-19 15:17:09 · 2463 阅读 · 6 评论 -
web前端开发时推荐用rem做单位
欢迎访问我的 个人博客我之前做页面写css样式的时候一直用的 px 做单位,因为直接看着PC端的设计图标注多少像素就写多少像素。 直到做了一个内容宽度是1440px 大小的PC端设计图后,我感觉用 rem 做单位才是最好的选择(个人认为),不管开发的是PC端还是移动端,还是响应式页面。下面我说下我对 rem 的看法,和我怎样使用 rem ,为什么推荐使用 rem一、rem 单位rem 是一个相对单位,相对根元素 <html>标签 字体大小的单位,一般浏览器默认的是 1rem = 16p原创 2020-06-09 19:18:35 · 1432 阅读 · 0 评论 -
关于IE10+不支持条件注释的解决办法
1、使用IE=EmulateIE9属性指示浏览器采用IE9渲染技术<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9"> 在html网页的head里加入上面的meta标签,这样IE10/11就能识别条件性注释了,我们也就可以编写针对性的CSS代码了。 但这样做有个弊端,浏览器最高就只能在IE9的渲染模式,而不是...转载 2018-05-25 15:06:23 · 2070 阅读 · 0 评论 -
微信小程序自定义组件-环形进度条
微信小程序自定义组件官方教程环形进度条的组件已经放在github上环形进度条效果图创建步骤1、在根目录创建名为components的文件夹,用来放需要引用的自定义组件。2、创建名为canvas-ring的文件夹,用来放环形进度条自定义组件。3、鼠标指着canvas-ring的文件夹 鼠标右键 “新建 Component” 取名canvas-ring。结构图:环形进度条组...原创 2018-12-01 18:36:25 · 3529 阅读 · 5 评论 -
微信小程序中实现吸顶效果(流畅、不卡顿)
最开始的时候,在小程序中实现吸顶效果,开发工具看起来还挺好的,但是在真机上就会有问题了。 原因是我不停的去 setData 会导致操作反馈延迟严重,无法及时将操作处理结果及时传递到视图层。后面就对代码进行了调整,避免不停的去setData效果图吸顶前吸顶后代码部分wxml<view style="width: 90%; height: 300rpx; backgrou...原创 2019-08-21 18:05:37 · 10658 阅读 · 16 评论