由于本人最近在开发小程序项目,期间对小程序有花点时间去研究,同时也找了网上大牛的一些案例,在这里分享部分自定义组件,部分代码是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新手入门——vue-cli搭建

    首先说明,以下内容vue官网都有文档,如果觉得麻烦啰嗦,请移步至 安装-vue.js . 准备工作: 1.下载并安装node环境,一般情况下安装好node之后,npm也会安装好.具体安装的话,百度大概 ...

  2. git 分支合并 强制合并

    常用的提交流程git add *.XXXgit commit -m "备注....." # 提交到本地分支git fetch git merge #"合并远程分支情况,如 ...

  3. web-iPhone X

    题目: 解题思路: 第一次看到html里只有字其他啥也没有的题,一脸懵逼,学长提示抓包改包,于是开始我的苦逼解题. 0x01 抓包 0x02 改包 由于题目说只有iphoneX才能接受这个websit ...

  4. linux下expect命令实现批量ssh免密

    有时候我们需要批量发送ssh命令给服务器,但是有可能有些服务器是新加入的,还没有配置ssh免密,这个时候就会提示我们输入yes/no 或者password等,expect脚本命令就是用于在提示这些的时 ...

  5. 基于微博LBS API开发的周边美图android app

    [app 不完善,就差api了] 几年之前看到过新浪微博开放API中有基于Place的API,授权后可以查看基于地理位置的一些数据,比如某个地点周边的微博动态.某个具体用户的位置动态等等.最近空余时间 ...

  6. JavaSE学习入门

    Java基础: 1.安装JDK1.7(JDK 包括JRE,Java工具包,Java的类库) 2.编写Hello,world 程序 public class Hello{ public static v ...

  7. Redis-Nosql数据库入门

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

  8. svn 如果遇到an unversioned directory of the same name already exists的解决办法

    svn 如果遇到an unversioned directory of the same name already exists的解决办法 一般这种情况是因为,在一个已经存在的文件夹里做SVN che ...

  9. mysql优化sql语句的方法

    1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引. 2.应尽量避免在 where 子句中使用!=或<>操作符,否则将引擎放弃使用索 ...

  10. 浏览器出现Cannot set property 'onclick' of null的问题

    Part1: 当js文件放在head里面时,如果绑定了onclick事件,就会出现这样的错误, 是因为W3School的写法是浏览器先加载完按钮节点才执行的js,所以当浏览器自顶向下解析时,找不到on ...