更新日期: 2019/3/15:首次发布,具体请下载:demo. ...
技术概述 需求是实现一个包含三种状态,分别是底部 半屏 全屏的浮层,并且浮层支持用户随意拖动,同时还要防止用户过度拖动。技术难点在于对动画的控制,必须得有一定的过渡动画否则整体会很突兀。 技术详述 首先看一下预期的样子,图为ios自带高德地图的底部浮层。 最开始的动画我是用CSS的keyframe来写的,即利用关键帧来标记三个状态,将过渡时间设置为 毫秒,出现的问题就是在程序运行时控制动画只能通过 ...
2021-06-26 23:03 1 332 推荐指数:
更新日期: 2019/3/15:首次发布,具体请下载:demo. ...
我们先来看效果图 像这样的一个带过渡效果的小部件在我们实际开发中的应用几率还是比较大的,但是在开发微信小程序的过程中可能有的小伙伴发现transition这个属性它不好使(下面说明)所以我们这个时候会考虑去使用微信官方提供的wx.createAnimation API来创建动画。 接下 ...
安装uni-transition 过渡动画插件 在页面中<uni-transition mode-class="fade" :show="true"></uni-transition>包裹的内容将有淡入效果 ...
wxml: wxss: js ...
在app.json 中添加 "tabBar": { "color":"#ffffff", "borderStyle":"white", "selectedC ...
底部导航栏这个功能是非常常见的一个功能,基本上一个完成的app,都会存在一个导航栏,那么微信小程序的导航栏该怎么实现呢?经过无数的踩坑,终于实现了,好了,先看看效果图。 对于底部导航栏,小程序上给出的文档要求里面的item最少2个,最多五个。 好了,先看看代码: 在项目中找到这个文件 ...
第一步,在组件里编写弹窗的代码 第二部,在对应的点击事件中 第三部,隐藏弹框 注意:上面的550是你弹框的高度rpx,上面的catchtouchmove是弹框显示的时候防止地图的遮罩层滚动 效果如下 ...
效果图: 1.在app.json里头添加 "tabBar": { "color": "#bfbfbf", "selectedColor": "#1196db" ...