首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    前端-微信小程序开发(4):打造自己的UI库

    组件的时候意识到一个问题: 小程序的组件事实上是标签 我们没有办法获得标签的实例,至少我暂时没有办法 所以这些前提让我们对标签的认识有很大的不同,完成小程序特有的UI库,那么就需要从标签出发 这里面关注的点从js.../utils/util.js') module.exports = Behavior({   properties: {     //重要属性,每个组件必带,定义组件是否显示     isShow.../utils/util.js') module.exports = Behavior({   properties: {     //重要属性,每个组件必带,定义组件是否显示     isShow.../utils/ui-util.js'); //获取应用实例 const app = getApp() Page({   data: uiUtil.getPageData(),   onShow...toast组件 我们现在先继续作toast组件,toast组件一样包含一个遮盖层,但是点击的时候可以关闭遮盖层,显示3秒后关闭,显示多久关闭的属性应该是可以配置的(作为属性传递),所以我们新增组件: ?

    1.1K20

    前端-微信小程序开发(3):这是一个组件

    作为控制器,现在是以标签wxml作为控制器,根本没有办法在js中获取实例,而小程序组件的生命周期并不包含显示隐藏生命周期,所以他的组件和我们以为的组件有很大的不同 我思考了下为什么小程序中,js不能获取组件的实例...不能获取的标签),而不是js组件,这样会有效帮助我们理解 我们这里尝试实现一个遮盖层的标签(这里开始不用组件这个词,感觉很有歧义): ?...  data: {     myData: {}   },   attached: function () { },   methods: {   } }) 可以看到,这个遮盖层...mask没有什么意义,而且一般来说mask也不会单独存在,一般是一个组件(比如弹出层的loading)会包含一个遮盖层,所以我们这里要改造下Mask的结构,让他可以装载组件,我们从js组件逻辑来说是mask...我们后续将完整的项目代码放到github上去,这里便继续代码了 添加事件 于是,我们开始添加事件了,这里添加一个点击遮盖层关闭整个组件的功能,这里有个问题是,我们点击遮盖层事实上关闭的是遮盖以及loading

    47630

    浅议内滚动布局

    对于黑色半透明覆盖层,传统实现是这样的:如果要兼容IE6浏览器,一般是absolute绝对定位,高度由JS计算赋予;如果不需要管IE6, 则可以使用fixed固定定位。...然而,在内滚动布局下,“赏”就出来了,就算需要兼容IE6浏览器,黑色半透明高宽100%自适应覆盖也不需要任何JS计算的帮助,也不需要监听window的resize事件,直接CSS就可以搞定。...随意改变滚动容器最大的问题在于,当存在覆盖层的时候,会影响背后页面内容的滚动。...内滚动布局是典型的改变浏览器默认滚动容器的布局,自然覆盖层一出现,就没法滚动。不过这也没什么,对吧,弹框出现时候,页面背景没法滚也挺好的。...---- 往期精选文章 使用虚拟dom和JavaScript构建完全响应式的UI框架 扩展 Vue 组件 使用Three.js制作酷炫无比的无穷隧道特效 一个治愈JavaScript疲劳的学习计划 全栈工程师技能大全

    1.2K20

    浅议内滚动布局 - 腾讯ISUX

    ,一般是absolute绝对定位,高度由JS计算赋予;如果不需要管IE6, 则可以使用fixed固定定位。...然而,在内滚动布局下,“赏”就出来了,就算需要兼容IE6浏览器,黑色半透明高宽100%自适应覆盖也不需要任何JS计算的帮助,也不需要监听window的resize事件,直接CSS就可以搞定。...随意改变滚动容器最大的问题在于,当存在覆盖层的时候,会影响背后页面内容的滚动。...内滚动布局是典型的改变浏览器默认滚动容器的布局,自然覆盖层一出现,就没法滚动。不过这也没什么,对吧,弹框出现时候,页面背景没法滚也挺好的。...基本上,90%+的弹框组件,半透明覆盖层overlay和弹框dialog是两个并列的兄弟关系的独立的元素,这种设计的好处在于overlay组件可以复用。

    1.4K30

    学会不一样的Loading图

    且听我娓娓道来,相关代码已经放在github 本文概要 一、增加覆盖层以及动态效果 1、获取控件path // 获取每个子控件的path,用于后面的加遮盖 mask layer // 添加圆角...appendPath:relativePath]; 获取每个控件,并且求出控件的path(也就是控件最外边的那些线),原本的控件遮罩只是矩形,为了美观,我建议每个控件path添加圆角 2、添加覆盖层...,仅显示控件path的渐变色图层 // 添加挡住所有控件的覆盖层(挡住整superview,包括 superview 的子控件) self.viewCover.frame = CGRectMake...maskLayer.fillColor = [UIColor whiteColor].CGColor; colorLayer.mask = maskLayer; 1、 添加覆盖控件的覆盖层...2、 添加渐变色图层到挡住控件的覆盖层 3、为渐变色图层设置mask,从而显示mask面积下面的渐变色图层(原理看下方) 原理: 遮罩层必须至少有两个图层,上面的一个图层为“遮罩层”,下面的称

    91340

    Cocos Creator 如何制作拼图游戏,支持无规则形状!

    其中每个碎片,使用特定形状的照,挡住背景,实现部分显示效果。...碎片的照 碎片考虑到是特殊形状,我这个实现方式,有个要求,就是碎片四周凸起的高度,都要是一样的,没有凸起的位置,使用透明边补充起来,这样是为了方便计算位置,算法也通用,只要给出几行几列,背景图的大小...比如上图,上下左右四个方向的红色箭头所标记的宽度,需要保持一样,这样的话,算上透明边,每张照图都是等宽高的图了,至于凸起或者凹陷的部分,根据需要去调整就行,只要保证凸起和凹陷的高度一致即可。...碎片的显示 有了上一步的碎片照,就只需要使用 Mask 来控制显示背景图的位置即可,比如本demo 中的背景图,如果需要显示左上角的那个碎片,适当移动背景图的位置,就能像下图这样进行显示。...打开背景照的效果,就是想要显示的碎片区域了,如下图绿色区域。 ? 以上,就是每一张碎片的实现方式了。

    2K30

    浅议内滚动布局

    对于黑色半透明覆盖层,传统实现是这样的:如果要兼容IE6浏览器,一般是absolute绝对定位,高度由JS计算赋予;如果不需要管IE6, 则可以使用fixed固定定位。...然而,在内滚动布局下,“赏”就出来了,就算需要兼容IE6浏览器,黑色半透明高宽100%自适应覆盖也不需要任何JS计算的帮助,也不需要监听window的resize事件,直接CSS就可以搞定。...随意改变滚动容器最大的问题在于,当存在覆盖层的时候,会影响背后页面内容的滚动。...内滚动布局是典型的改变浏览器默认滚动容器的布局,自然覆盖层一出现,就没法滚动。不过这也没什么,对吧,弹框出现时候,页面背景没法滚也挺好的。...基本上,90%+的弹框组件,半透明覆盖层overlay和弹框dialog是两个并列的兄弟关系的独立的元素,这种设计的好处在于overlay组件可以复用。

    2.5K50

    低延时、高效率、低丢包的同屏直播软件SkeyeLive接口说明文档

    setLiveAudioParams(int sampleRate, int channels, int audioBitRate, AudioEncode audioEncode);视频叠加模块获取当前视频叠加的覆盖层...return 覆盖列表 std::list */ std::list overlays() const; /** * @brief 添加覆盖层...* @param overlay 要添加的覆盖层 */ void appendOverlay(Overlay *overlay); /** * @brief 移除覆盖层...* @param overlay 要移除的覆盖层 */ void removeOverlay(Overlay *overlay);添加视频叠加层(支持文本或者图像)移除视频叠加层...高为采集相机视频叠加到屏幕上的矩形位置; (2) 本地音频采样率默认为系统音频默认采样率,设置在SkeyeLive的采样率为经过重采样出来的,音频默认位宽为32位浮点(FLT); (3) 视频叠加Overlay覆盖层支持文本和图像叠加

    81510

    《Motion Design for iOS》(二十七)

    为了警告框的显示,如我之前所说,我们想要覆盖层从完全透明(不可见)变成半透明。我们还想要添加两个动画到警告框中:将不透明度从0.0动画到1.0,以及将比例从大于1.0动画到1.0。...首先让我们处理两个不透明度的动画(覆盖层和警告框视图),因为不透明度动画一般不需要任何高级的弹簧动作,让我们使用一些简单的基于block的UIView动画。...// 淡入灰色的封盖层和警告框视图 [UIView animateWithDuration:.3 delay:0 options:UIViewAnimationOptionCurveEaseInOut...animations:^{ overlayView.alpha = 0.3f; alertView.alpha = 1.0f; } completion:NULL]; 我们同时在一个block中动画覆盖层和警告框视图的不透明度...这是因为我想要覆盖层和警告框在同一个动画和同样的时间中呈现给用户,所以为什么不一起动画它们呢?我将持续时间调整到比三分之一秒略少。

    31330

    一个简单实用的SSAO实现

    这样经过对深度缓冲的采样, 平均遮挡体的距离后得出就得到了一个闭缓冲. 但是这种方式存在一些问题(如自闭, 光环), 之后我会说明...., 可以这么计算它的环境闭: 把所有周围的像素当做小球, 计算它们的贡献度之和....这个算法非常简单: 从当前像素周围采样一些邻近点, 用上面的公式统计出闭贡献度....如你所见, 代码既短小又简单, 结果也没有自闭, 只有很微弱的光环....这就导致了整体的闭效果是偏灰色的. 光环是物体周围出现的白色软边, 因为这些区域自闭是没有起作用的. 所认, 避免自闭的同时也能减弱光环问题. 这个方法在你移动摄像机时会产生今人惊呀的效果.

    73210

    hexo博客自制背景动画(代码雨)

    function rain() { context.fillStyle = 'rgba(0, 0, 0, .1)' // 增加一个遮盖层...实现动画效果后,把它加到 hexo 主题中去 在blog\themes\hexo-theme-matery\source\js中添加名为 digitalRain.jsjs 文件,把之前写的 js...这样子的话,部署(hexo g -d)之后可以在blog\public\js中发现新增的 js 文件 这个时候,js 文件到位了,但是 html 文件并没有引入 js 文件,就要使用 hexo 主题的功能了...这个时候可以到 github 下的博客仓库看一下,js 文件有没有在上面 引入成功的话,如下图,双击下图 js 文件时会去到 js 文件的地址 把 js 引入后,就需要设置一下样式了。...样式可以通过 js 设置,但是这样子,样式部分和行为部分就混在一起了,之后想改进时会变得很困难。

    55940
    领券