由于本人最近在开发小程序项目,期间对小程序有花点时间去研究,同时也找了网上大牛的一些案例,在这里分享部分自定义组件,部分代码是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. Spring MVC体系结构和处理请求控制器

    Spring MVC体系结构和处理请求控制器 一:MVC设计模式: (1.)数据访问接口:DAO层 (2.)处理业务逻辑层:Service层 (3.)数据实体:POJO (4.)负责前段请求接受并处理 ...

  2. [转]Oracle 索引质量分析

    http://blog.csdn.net/leshami/article/details/23687137 索引质量的高低对数据库整体性能有着直接的影响.良好高质量的索引使得数据库性能得以数量级别的提 ...

  3. 【S2-052】漏洞复现(CVE-2017-9805)

    一.漏洞描述 Struts2 的REST插件,如果带有XStream组件,那么在进行反序列化XML请求时,存在未对数据内容进行有效验证的安全隐患,可能发生远程命令执行. 二.受影响版本 Struts2 ...

  4. 从cdn说起

    为什么要使用cdn 雅虎军规有一条规则建议我们是用cdn.随便在网上搜索,可以找到使用的cdn的好处. 再次强调第一条黄金定律,减少网页内容的下载时间.提高下载速度还可以通过CDN(内容分发网络)来提 ...

  5. 《Linux命令行与shell脚本编程大全》第十三章 更多的结构化命令

    本章讨论bash shell的循环命令for.while和until 13.1 for命令 重复执行一系列命令在编程中很常见. bash shell提供了for命令,允许你创建一个遍历一系列值的循环. ...

  6. Redis-Nosql数据库入门

    简介 Redis是Nosql数据库的一种,可基于内存亦可持久化的日志型.是一个Key-Value数据库,多用在缓存方面 安装 Windows 下载地址, 最新版本的Redis好像仅支持64位 Wind ...

  7. 51Nod 1090 3个数和为0 set 二分优化

    给出一个长度为N的无序数组,数组中的元素为整数,有正有负包括0,并互不相等.从中找出所有和 = 0的3个数的组合.如果没有这样的组合,输出No Solution.如果有多个,按照3个数中最小的数从小到 ...

  8. HDU 1754 线段树 单点跟新 HDU 1166 敌兵布阵 线段树 区间求和

    I Hate It Time Limit: 9000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total ...

  9. linux 安装 cenos7 和 jdk

    安装一个虚拟机安装cenos7 版本的 安装完虚拟机后必备工具 第一步. 配置网路 设置桥接网路设置静态网络参考 下面博文 http://www.cnblogs.com/Jerry1104/p/758 ...

  10. 前端chrome浏览器调试

    引言 "工欲善其事,必先利其器" 恩,这句话我觉得说的特别有道理,举个例子来说吧,厉害的化妆师都有一套非常专业的刷子,散粉刷负责定妆,眼影刷负责打眼影,各司其职,有了专业的工具才能 ...