微信小程序卡片反转特效 / 张生荣

微信小程序实现点击卡片翻转效果

动画效果: wxml: <view class='main'>  <view class="box b1" animation ...

侧边栏滑动是很常见的功能,但是小程序出来不久,很多特效还没有成熟案例,只能原生重写,所以今天为大家带来4个漂亮的侧边栏特效~~ 侧边栏特效一先看效果: wxml: <!--page/one/i ...

前言一直想给项目中的小程序设置侧滑栏,将退出按钮放到侧滑中,但是小程序没有提供相应的控件和API,因此只能自己手动实现,网上很多大神造的轮子很不错,本文就在是站在巨人的肩膀上实现. hexo图片不显 ...

本文实例为大家分享了微信小程序之卡片层叠滑动效果的具体代码,供大家参考,具体内容如下代码: js: // index/gun/jsSwiper2/jsSwiper2.js Page({ /** * ...

最近工作中有项目要使用微信小程序技术进行开发,其中一项功能困扰了我很久,卡片滑动动效以及手势识别.经过一番研究和参考,现在把成果展示.记录自己踩到的坑,如果大家有需要,也可以帮助到大家. 效果图: 首 ...

快放假了,人狠话不多,啥也不说了.先看效果图. 思路从上面的效果图来看,基本的需求包括: 左右滑动到一定的距离,就向相应的方向移动一个卡片的位置. 卡片滑动的时候有一定的加速度. 如果滑动距离太小, ...

实现类似ios端微信的左滑显示置顶.删除按钮的功能,首先需将按钮部分设为绝对定位,并且right设为负值溢出屏幕.利用小程序事件处理的api,分别读取触摸开始,触摸移动时,触摸结束的X/Y坐标,根据差 ...

本文实例为大家分享了微信小程序实现吸顶特效的具体代码,供大家参考,具体内容如下效果图 wxml代码: <view class="xiding {{oneFixed}}" i ...

本文实例为大家分享了微信小程序实现时间轴特效的具体代码,供大家参考,具体内容如下效果 wxml <view class="timeLine" style=" wi ...

本文实例为大家分享了微信小程序实现卡片层叠滑动的具体代码,供大家参考,具体内容如下实现效果: 1.左右滑动时,向相应方向移动一个卡片位置:2.点击某一项时,将点击项位置移动到中间位置: 代码如下: ...

实现效果图: 抽屉菜单是app上常见的菜单设计方式,典型的抽屉菜单如下图所示下面展示如何基于微信小程序实现抽屉菜单,最终效果如下图所示: 页面包含一个主页和抽屉菜单页,为了实现滑动效果,页面采用ab ...

今天给大家带来一个微信小程序的弹出是菜单效果,老规矩先上效果图.(录制的gif动画有点卡,实际真机或是模拟器上很顺畅) 先简单说下思路: 1.首先在屏幕的某个位置放几个悬浮按钮,放几个看你需要的功能 ...

本文实例为大家分享了微信小程序实现顶部导航的具体代码,供大家参考,具体内容如下之前Android开发时,顶部导航用到viewPage,微信小程序里想要达到同样的效果,可用swiper来实现,先看效果 ...

前言最近微信小程序团队像打了鸡血似的,不断推出一系列新的小程序功能,以及拓展了不少小程序的入口,使得小程序的运行场景变得越来越丰富.因此,不同的进入场景,必然会带来不同的用户需求,如何能根据这些不同 ...

前言 2017年前端火了,微信小程序.weex.reactnative,就连支付宝也搞起了小程序,总感觉这是原生要毁灭的节奏啊,我也乘热上车万一波. 上效果图(GIF动态图) 当我看到这张背景图的时候 ...

微信小程序转发功能的实现 1.当用户将小程序转发到任一群聊之后,可以获取到此次转发的 shareTicket 2.此转发卡片在群聊中被其他用户打开时,可以在 App.onLaunch() 或 App ...

前言瀑布流布局是一种比较流行的页面布局方式,最典型的就是Pinterest.com,每个卡片的高度不都一样,形成一种参差不齐的美感. 在HTML5中,我们可以找到很多基于jQuery之类实现的瀑布流 ...

本文实例讲述了微信小程序开发之animation循环动画实现的让云朵飘效果.分享给大家供大家参考,具体如下: 微信小程序提供了实现动画的api--animation,但却不能循环播放,都是一次性的,动 ...

微信小程序出现47001 data format error原因解决办法看下错误: 主要原因是请求的数据不是json格式引起的分享下我用的代码和函数: 发送模板消息 public functio ...

公司开发微信小程序,pm想实现如下需求: 用手指缩放图片.其实在实现这个需求以前,并不知道,微信公众号以及微信小程序里面有一个原生的api就自带这个特效,而且微信朋友圈也是用的这个api.wx.pre ...