由于本人最近在开发小程序项目,期间对小程序有花点时间去研究,同时也找了网上大牛的一些案例,在这里分享部分自定义组件,部分代码是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. Vue组件库 VV-UI 开始接受PR啦,有兴趣小伙伴可以一起参与开源哦。

    前言: 刚开源出来的VV-UI目前刚刚起步,组件不是很多,非常欢迎大家的pr和Star.项目地址: https://github.com/VV-UI/VV-UI演示地址: https://vv-ui. ...

  2. Java多线程与并发模型之锁

    这是一篇总结Java多线程开发的长文.文章是从Java创建之初就存在的synchronized关键字引入,对Java多线程和并发模型进行了探讨.希望通过此篇内容的解读能帮助Java开发者更好的理清Ja ...

  3. Cloudstack网络分析-基本网络

    前言 相信对于很多初学者或者使用者来说,刚开始接触Cloudstack的时候可能会被Cloudstack的网络概念弄得有些糊涂,例如,基础网络,高级网络,细之网络流量分类(公共,管理,来宾,存储),这 ...

  4. matplotlib删除x轴

    组内有个同事,有个奇怪的需求需要matplotlib删除x轴 效果图如下:

  5. 完美解决--用VS中的Git做代码管理器,与他人共享代码

    1.创建代码仓库,这里说一下为什么要创建仓库,Git不能够作为源代码管理器,vs中自带的也只能够在本地进行管理,要和他们共享的话必须要有服务器端去存储代码,类似于SVN,它就有客户端和服务器端,这里推 ...

  6. Hue 之 SparkSql interpreters的配置及使用

    1.环境说明: HDP 2.4 V3 sandbox hue 4.0.0 2.hue 4.0.0 编译及安装 地址:https://github.com/cloudera/hue/releases/t ...

  7. C#设计模式之十六迭代器模式(Iterator Pattern)【行为型】

    一.引言   今天我们开始讲"行为型"设计模式的第三个模式,该模式是[迭代器模式],英文名称是:Iterator Pattern.还是老套路,先从名字上来看看."迭代器模 ...

  8. 七、Hadoop学习笔记————调优之Hadoop参数调优

    dfs.datanode.handler.count默认为3,大集群可以调整为10 传统MapReduce和yarn对比 如果服务器物理内存128G,则容器内存建议为100比较合理 配置总量时考虑系统 ...

  9. Less注释语法

    Less注释语法 适当的注释是保证代码可读性的必要手段,Less支持两种类型的注释:多行注释和单行注释. 1)形如 /* */ 的多行注释.如: /* Hello, I'm a CSS-style c ...

  10. Less运算和函数

    Less运算和函数   Less运算 在我们的 CSS 中,充斥着大量数值型的 value,比如 color.padding.margin 等.在某些情况下,这些数值之间是有着一定关系的,那么我们怎样 ...