
demo
文章平均质量分 76
玩烂小程序
写程序前先写DEMO
展开
-
微信小程序——通过一步步写出侧滑效果,不再畏惧此类交互
摘要5年的代码生涯,逐渐琢磨出一个道理——困难都是想象出来的,真去做了也没那么难。就像写代码,遇到复杂的就百度,复制粘贴感觉不错,可自己还是那个自己,问题还是那个问题,遇到了,心里还是有一丝恐惧、一丝好奇。侧滑效果,最早见到还是在qq中,现在一步步实现下,就算征服吧!效果体验思路1、首先将两层view叠放,由于小程序页面的最外层支持上下滑动,为了防止干扰,底层view与顶层view...原创 2020-02-11 23:12:08 · 929 阅读 · 0 评论 -
微信小程序—仿淘宝热搜词在搜索框中轮播功能
逛淘宝的时候,发现淘宝搜索框中一直在垂直方向上轮播热搜提示词,觉得这是个不错的设计,除了能让空间更充分使用,也能让页面更有动感,最重要的是能够增加搜索框的使用频率。就在小程序中试着实现实现。原创 2020-01-20 16:46:35 · 2356 阅读 · 0 评论 -
微信小程序—swiper实现文字纵向轮播提示
小程序顶部总会看到滚动的通知栏,一般单条的都会用跑马灯去实现,但面对多条的内容,就需要用轮播去实现,轮播自然是swiper了,查了查,还真有vertical这个属性,swiper真好用。原创 2020-01-20 16:09:40 · 3980 阅读 · 1 评论 -
微信小程序—千变万化的图片处理(canvas那些滤镜效果)
美图秀秀处理图片的功能真是没的说,那些什么小美好、小森林、白兔糖、小纸条等等的特效,说白了都是滤镜的作用,只不过滤镜的参数需要调整才能起到美化的作用,再接着起个小美好、小森林这样毫无关系却又优美无比的名称,这里只提供特效方法,不提供美化参数。原创 2020-01-08 11:03:39 · 2685 阅读 · 2 评论 -
微信小程序—写字板、手写签名(高仿毛笔效果)让汉字引领世界
计算机的发明让手写受到毁灭性打击,但手写的经典不能埋没,这是一款手写签名工具,根据手写速度计算笔宽,很有毛笔的风韵,请拿去使用。原创 2020-01-08 10:25:39 · 6407 阅读 · 1 评论 -
微信小程序—图片色彩分析(拾取图片的配色方案)
这是一款图分析图片配色方案demo,图片色彩分析或许可以应用在智能分析色彩领域,比如穿衣搭配、家装等设计或生活领域,但需要大量数据的支持,希望技术能够更好的被应用原创 2020-01-08 09:56:45 · 6424 阅读 · 2 评论 -
微信小程序—刮刮乐(圆形清除图层)刮个美女乐呵呵!!!
刮刮乐,因为未知而格外显得神秘,特别是在奖项激励的场景下,更加激动人心,没人给奖,刮个美女是啥效果???????嘻嘻嘻.....充满想象空间.原创 2020-01-08 01:48:02 · 2368 阅读 · 1 评论 -
微信小程序—那些浪到家的自定义loading
个人认为,一个拥有良好交互的应用,一定在细节上抠的特别细,loading相信就是其中之一的细节,从网上搜集了一些不错的loading动画,现在分享一下,对应代码,我会以免积分下载方式附在文末。原创 2020-01-08 00:56:53 · 839 阅读 · 1 评论 -
微信小程序—调用罗盘接口实现指南针效果,致敬四大发明
指南针是中国的四大发明之一,小程序实现并不复杂,却总有一种冲动去实现,可能是为了向老祖宗致敬吧!感兴趣的同学可以把它实现的更精致。原创 2020-01-07 22:42:42 · 5084 阅读 · 1 评论 -
微信小程序—亲测仿真摇一摇功能的算法
摇一摇算法网上很多,但都是简单的实现,并不能达到微信摇一摇那种监听动作的准确,为了更好的实现摇一摇,首先需要理解加速计返回数据与摇晃动作的关系,因此介绍一款找加速计数据规律的工具,可直接扫码使用,理解关系后,就很容易实现摇一摇功能。原创 2020-01-07 21:55:27 · 3313 阅读 · 1 评论 -
微信小程序——使用加速计实现水平仪功能,另介绍一款硬件数据监听工具(加速计、陀螺仪、设备方向)
实现水平仪的算法不难,但是理解加速计—wx.onAccelerometerChange、陀螺仪—wx.onGyroscopeChange、设备方向—wx.onDeviceMotionChange这些接口返回数据很恶心,一是只能真机调试,二是晃动手机很难在一堆数据中找到规律,很恶心,为此,本文除了介绍水平仪的简单算法外,更重要的是介绍一款找数据规律的工具。原创 2020-01-07 21:27:43 · 5040 阅读 · 8 评论 -
微信小程序—canvas实现涂鸦、画画功能,仅包含功能,不包含其他业务
涂鸦的功能在demo你画我猜中得到很好的实现,但是demo中涉及到很多其他本不需要的业务线,现将原demo及剥离之后的涂鸦功能代码一并呈上,希望在用的时候更加方便原创 2020-01-07 20:03:18 · 1288 阅读 · 0 评论 -
微信小程序—自定义图片的拖拽、缩放、旋转
微信小程序—自定义图片的拖拽、缩放、旋转功能只需要拷贝了原创 2020-01-07 17:56:58 · 3644 阅读 · 3 评论 -
微信小程序—上划悬停效果
写代码,有时候就像变戏法一样,就像上滑悬停,看着是停了,其实只是那个位置提前放了一个一模一样的,通过wx:if="{{isShow}}"来控制隐现,如此而已。原创 2020-01-07 16:27:02 · 1281 阅读 · 0 评论 -
微信小程序—自定义导航栏(上划导航栏渐变)
摘要最近在体验小程序的时候,总会遇到一种自定义导航栏,随着上划的动作,颜色逐渐变化,思考后,自己实现一下效果体验体验路径:自定义系列>导航栏代码分为页面和组件两部分页面部分jslet navigationBarPage({ onLoad: function (options) { navigationBar = this.selectComponent("...原创 2020-01-07 15:54:32 · 3999 阅读 · 10 评论 -
微信小程序—常用的四种轮播图(间距、顶层、3D翻转、旋转木马)
摘要微信小程序轮播图官方提供的swiper组件已经可以满足大部分轮播图效果,如间距轮播、顶层轮播,可仍有一些像3D翻转、旋转木马等效果需要通过监听滑动动作、利用动画去自定义实现,现就此四种效果提供解决方案及代码参考。效果图体验体验路径:自定义系列>轮播图代码3D翻转轮播图与旋转木马轮播图代码资源文件中包含封装的组件及使用demo,3d组件支持横向、竖向以及任意方向旋转。...原创 2020-01-07 11:01:34 · 7282 阅读 · 1 评论 -
微信小程序—史上最全78种炫到爆的自定义动画
摘要最近在研究小程序,搜集整理而来共计78种自定义动画,现分享给大家,并且写成demo,读者可通过体验获取想要的效果,复制粘贴使用,希望能共同学习。部分效果图体验途径依次点击:custom系列>>动画78种动画名称从右放大、从上放大、缩小、从下缩小、从下缩小、从右缩小、 从上缩小、翻转、反弹、闪烁、脉冲、橡皮筋、摇晃、摇晃减弱、摆动、扭动、晃动、果冻、心跳、跳进、从左跳...原创 2019-12-27 03:23:38 · 4347 阅读 · 4 评论 -
微信小程序—史上最自由的自定义actionsheet,支持嵌套各种自定义布局
摘要说到小程序actionSheet,属于项目最常用的控件之一,也是变化最多端的控件之一,逼不得已,只有自定义,网上很多自定义actionSheet,但估计很少能直接用到项目中使用的,自己写又太麻烦,故笔者为了使用方便,只对actionSheet的显示与隐藏方法与效果进行封装,不涉及actionSheet中的布局、样式及逻辑,大大减少了平时的开发工作。使用步骤步骤1将文末actionShe...原创 2019-12-26 21:45:57 · 4926 阅读 · 6 评论 -
微信小程序—史上最自由的自定义dialog,支持嵌套各种自定义布局
说到小程序dialog,属于项目最常用的控件之一,也是变化最多端的控件之一,逼不得已,只有自定义,网上很多自定义dialog,但估计很少能直接用到项目中使用的,自己写又太麻烦,故笔者为了使用方便,只对dialog的显示与隐藏方法与效果进行封装,不涉及dialog中的布局、样式及逻辑,大大减少了平时的开发工作。原创 2019-12-26 20:58:20 · 3778 阅读 · 10 评论