由于本人最近在开发小程序项目,期间对小程序有花点时间去研究,同时也找了网上大牛的一些案例,在这里分享部分自定义组件,部分代码是copy大牛案例的,有对小程序有兴趣的伙伴拿走,不谢!

  源码下载地址:https://github.com/Jacky-MYD/WeChat-assembly.git

  下面直接看组件的效果,代码我就不说了,有兴趣的可以直接下载源码研究:

  1.个人认为比较完美的自定义Toast组件,效果如下:

  

  2.抽屉层组件,类似于日期选择的功能,效果如下:

  

  3.三级市联动组件,个人觉得官方自带的可能好用一点,不过有兴趣的可以研究一下,效果如下:

  

  4.自定义日历,看起来还是有点模样的,可以看一下:

  

  

  5.最好玩的就是这个了,最近也比较热的东西,瀑布流布局,挺好玩的,主要要懂得布局的原理,原理:

  • 瀑布流布局要求要进行布置的元素等宽,然后计算元素的宽度与浏览器宽度之比,得到需要布置的列数。
  • 创建一个数组,长度为列数,里面的值为已布置元素的总高度(最开始为0)
  • 然后将未布置的元素依次布置到高度最小的那一列,就得到了瀑布流布局。
  • 效果如下:

  

  以上就是最近搞的小东西,挺好玩的,本人开车比较稳,不喜勿喷,谢谢!

微信小程序各类型的自定义组件篇的更多相关文章

  1. 微信小程序学习笔记四 自定义组件

    1. 自定义组件 类似Vue或react中的自定义组件 小程序允许我们使用自定义组件的方式来构建页面 1.1 创建自定义组件 类似于页面, 一个自定义组件由json wxml wxss js 4个文件 ...

  2. 微信小程序入坑之自定义组件

    前言 最近接触微信小程序,再次之前公司用的前端框架是vue ,然后对比发现,开发小程序是各种限制,对于开发者非常不友好.各种槽点太多,完全吐槽不过来,所以在此不多说,打算下次专门写一篇文章吐槽一下.本 ...

  3. 适用于 Mpvue 的微信小程序富文本解析自定义组件

    废话不多说,直接上方法: 首先 npm 安装 mpvue-wxparse npm i mpvue-wxparse 接下来:使用 <template> <div> <wxP ...

  4. 小程序-文章:微信小程序常见的UI框架/组件库总结

    ylbtech-小程序-文章:微信小程序常见的UI框架/组件库总结 1.返回顶部 1. 想要开发出一套高质量的小程序,运用框架,组件库是省时省力省心必不可少一部分,随着小程序日渐火爆,各种不同类型的小 ...

  5. 微信小程序入门与实战 常用组件API开发技巧项目实战*全

    第1章 什么是微信小程序? 第2章 小程序环境搭建与开发工具介绍 第3章 从一个简单的“欢迎“页面开始小程序之旅 第4章 第二个页面:新闻阅读列表 第5章 小程序的模板化与模块化 第6章 构建新闻详情 ...

  6. 微信小程序开发之picker选择器组件用法

    picker组件时一个从底部弹起的可滚动的选择器(嵌入页面滚动器组件picker-view查看https://mp.weixin.qq.com/debug/wxadoc/dev/component/p ...

  7. 微信小程序开发之路之组件化

    类似于页面,自定义组件拥有自己的 wxml 模版和 wxss 样式. 官方链接 组件化,反过来理解,写重复的页面,方法,写第二遍就烦了,抽取出来就是组件化,可以理解为公用的方法 对于通用的数据,最先想 ...

  8. 微信小程序常见的UI框架/组件库总结

    想要开发出一套高质量的小程序,运用框架,组件库是省时省力省心必不可少一部分,随着小程序日渐火爆,各种不同类型的小程序也渐渐更新,其中不乏一些优秀好用的框架/组件库. 1:WeUI 小程序–使用教程 h ...

  9. 微信小程序(18)-- 自定义头部导航栏

    最近做的项目涉及相应的页面显示相应的顶部标题,所以就需要自定义头部导航了. 首先新建一个顶部导航公用组件topnav,导航高度怎么计算? 1.wx.getSystemInfo 和 wx.getSyst ...

随机推荐

  1. JDBC之代码优化

    上一次我们是先实现了JDBC对数据库的增删查改操作,然后在增加新信息过程中发现了新的问题,即当某一操作失败,为了维护数据库的一致性,我们需要回滚事务.在其中我们了解了事务的工作原理及相关代码的使用. ...

  2. [验证码识别技术]字符验证码杀手--CNN

    字符验证码杀手--CNN 1 abstract 目前随着深度学习,越来越蓬勃的发展,在图像识别和语音识别中也表现出了强大的生产力.对于普通的深度学习爱好者来说,一上来就去跑那边公开的大型数据库,比如I ...

  3. scala(一)Nothing、Null、Unit、None 、null 、Nil理解

    相对于java的类型系统,scala无疑要复杂的多!也正是这复杂多变的类型系统才让OOP和FP完美的融合在了一起! Nothing: 如果直接在scala-library中搜索Nothing的话是找不 ...

  4. Chapter 6: The Memory Hierarchy

    Disk Geometry: 磁盘的结构如图,每个面为surface,surface上的同心圆为track,track包含sector,不同的surface的同半径track构成cylinder.越外 ...

  5. Python——正则表达式

    此篇文章结合小甲鱼的笔记和视频整理. 1 编译 Python 通过 re 模块为正则表达式引擎提供一个接口,同时允许你将正则表达式编译成模式对象,并用它们来进行匹配. 正则表达式被编译为模式对象,该对 ...

  6. 《java.util.concurrent 包源码阅读》17 信号量 Semaphore

    学过操作系统的朋友都知道信号量,在java.util.concurrent包中也有一个关于信号量的实现:Semaphore. 从代码实现的角度来说,信号量与锁很类似,可以看成是一个有限的共享锁,即只能 ...

  7. HTML5学习指导路线

    HTML5是现在热门的技术,经过8年的艰苦努力,该标准规范终于制定完成,在这里为想要学习HTML5初级程序员详细划分一下学习内容和步骤,让大家清楚的知道HTML5需要学什么?能够快速掌握HTML5开发 ...

  8. TP框架中内置查询IP函数

    系统内置了get_client_ip方法用于获取客户端的IP地址,使用示例: $ip = get_client_ip(); 如果要支持IP定位功能,需要使用扩展类库Org\Net\IpLocation ...

  9. # WPF动画速率效果

    在WPF中使用动画的情况非常多,而要让动画变得生动往往要使用一些变速动画,WPF也内置了很方便的缓动函数来实现这一功能. 除此之外,WPF还有关键帧动画,利用关键帧动画能够很好的控制动画的细节,与美工 ...

  10. 企业级缓存系统varnish应用

    场景 随着公司业务快速发展,公司的电子商务平台已经聚集了很多的忠实粉丝,公司也拿到了投资,这时老板想通过一场类似双十一的活动,进行一场大的促销,届时会有非常多的粉丝访问网站,你的总监与市场部门开完会后 ...