微信小程序各类型的自定义组件篇
由于本人最近在开发小程序项目,期间对小程序有花点时间去研究,同时也找了网上大牛的一些案例,在这里分享部分自定义组件,部分代码是copy大牛案例的,有对小程序有兴趣的伙伴拿走,不谢!
源码下载地址:https://github.com/Jacky-MYD/WeChat-assembly.git
下面直接看组件的效果,代码我就不说了,有兴趣的可以直接下载源码研究:
1.个人认为比较完美的自定义Toast组件,效果如下:
2.抽屉层组件,类似于日期选择的功能,效果如下:
3.三级市联动组件,个人觉得官方自带的可能好用一点,不过有兴趣的可以研究一下,效果如下:
4.自定义日历,看起来还是有点模样的,可以看一下:
5.最好玩的就是这个了,最近也比较热的东西,瀑布流布局,挺好玩的,主要要懂得布局的原理,原理:
- 瀑布流布局要求要进行布置的元素等宽,然后计算元素的宽度与浏览器宽度之比,得到需要布置的列数。
- 创建一个数组,长度为列数,里面的值为已布置元素的总高度(最开始为0)
- 然后将未布置的元素依次布置到高度最小的那一列,就得到了瀑布流布局。
- 效果如下:
以上就是最近搞的小东西,挺好玩的,本人开车比较稳,不喜勿喷,谢谢!
微信小程序各类型的自定义组件篇的更多相关文章
- 微信小程序学习笔记四 自定义组件
1. 自定义组件 类似Vue或react中的自定义组件 小程序允许我们使用自定义组件的方式来构建页面 1.1 创建自定义组件 类似于页面, 一个自定义组件由json wxml wxss js 4个文件 ...
- 微信小程序入坑之自定义组件
前言 最近接触微信小程序,再次之前公司用的前端框架是vue ,然后对比发现,开发小程序是各种限制,对于开发者非常不友好.各种槽点太多,完全吐槽不过来,所以在此不多说,打算下次专门写一篇文章吐槽一下.本 ...
- 适用于 Mpvue 的微信小程序富文本解析自定义组件
废话不多说,直接上方法: 首先 npm 安装 mpvue-wxparse npm i mpvue-wxparse 接下来:使用 <template> <div> <wxP ...
- 小程序-文章:微信小程序常见的UI框架/组件库总结
ylbtech-小程序-文章:微信小程序常见的UI框架/组件库总结 1.返回顶部 1. 想要开发出一套高质量的小程序,运用框架,组件库是省时省力省心必不可少一部分,随着小程序日渐火爆,各种不同类型的小 ...
- 微信小程序入门与实战 常用组件API开发技巧项目实战*全
第1章 什么是微信小程序? 第2章 小程序环境搭建与开发工具介绍 第3章 从一个简单的“欢迎“页面开始小程序之旅 第4章 第二个页面:新闻阅读列表 第5章 小程序的模板化与模块化 第6章 构建新闻详情 ...
- 微信小程序开发之picker选择器组件用法
picker组件时一个从底部弹起的可滚动的选择器(嵌入页面滚动器组件picker-view查看https://mp.weixin.qq.com/debug/wxadoc/dev/component/p ...
- 微信小程序开发之路之组件化
类似于页面,自定义组件拥有自己的 wxml 模版和 wxss 样式. 官方链接 组件化,反过来理解,写重复的页面,方法,写第二遍就烦了,抽取出来就是组件化,可以理解为公用的方法 对于通用的数据,最先想 ...
- 微信小程序常见的UI框架/组件库总结
想要开发出一套高质量的小程序,运用框架,组件库是省时省力省心必不可少一部分,随着小程序日渐火爆,各种不同类型的小程序也渐渐更新,其中不乏一些优秀好用的框架/组件库. 1:WeUI 小程序–使用教程 h ...
- 微信小程序(18)-- 自定义头部导航栏
最近做的项目涉及相应的页面显示相应的顶部标题,所以就需要自定义头部导航了. 首先新建一个顶部导航公用组件topnav,导航高度怎么计算? 1.wx.getSystemInfo 和 wx.getSyst ...
随机推荐
- python进阶------进程线程(五)
Python中的IO模型 同步(synchronous) IO和异步(asynchronous) IO,阻塞(blocking) IO和非阻塞(non-blocking)IO分别是什么,到底有什么区别 ...
- cgg之类型转换
3.类型转换 3.1算术类型转换 编译器默认的隐式转换等级: long double >double >float >long long >long >int >c ...
- CocoaPods 安装及使用
1.开启 terminal 2.移除现有 Ruby 默认源 $ gem sources --remove https://rubygems.org/ 3.使用新的源 $ gem sources -a ...
- 了解Python列表的一些方法
首先定义一个名字列表,然后使用print() BIF在屏幕上显示这个列表. 接下来,使用len() BIF得出列表中有多少个数据项,然后再访问并显示第2个数据项的值: 创建了列表之后,可以使用列表方法 ...
- Function Programming - 纯函数(Pure Function)
纯函数的定义,非常重要!! Pure function 意指相同的输入,永远会得到相同的输出,而且没有任何显著的副作用. 老样子,我们还是从最简单的栗子开始: var minimum = 21; va ...
- MVC模式tp框架四中路由形式
①基本get形式 http://网址/index.php?m=分组&c=控制器&a=操作方法 该方法是最底层的get形式,传统的传递参数方式,不安全. ②pathinfo路径形式[默认 ...
- 快速上手使用Maven
maven的相关命令 mvn archetype:create :创建 Maven 项目 mvn compile :编译源代码(编译到target文件夹中) mvn test-compile :编译测 ...
- PHP通过ZABBIX API获取主机信息 VS 直接从数据库获取主机信息
最近项目需要获取linux主机的一些信息,如CPU使用率,内存使用情况等.由于我们本身就装了zabbix系统,所以我只用知道如何获取信息即可,总结有两种方法可以获取. 一.通过ZABBIX API获取 ...
- Retrofit网络请求库应用01
PS:什么是Retrofit? 在官方文档中有这样一句话--A type-safe HTTP client for Android and Java(一个类型安全的http client库),具体的话 ...
- sql关键词的执行顺序
执行顺序:FROM>ON>JOIN>WHERE>GROUP BY>WITH CUBE or WITH ROLLUP>HAVING>SELECT>DIST ...