微信小程序 MinUI 组件库系列之 loadmore 页底组件
MinUI 是基于微信小程序自定义组件特性开发而成的一套简洁、易用、高效的组件库,适用场景广,覆盖小程序原生框架、各种小程序组件主流框架等,并且提供了高效的命令行工具。MinUI 组件库包含了很多基础的组件,其中 loadmore 页底组件是一个很常用的基础元件, MinUI 中 loadmore 组件的效果图如下:
各式各样的类型都有哦,是不是看起来很方便很快捷的样子(^_^)。可以打开微信扫一扫下面的小程序二维码先一睹为快:
下面介绍 loadmore 组件的使用方式。
1、使用下列命令安装 Min-Cli,如已安装,请进入到下一步。Min-Cli 的文档请猛戳这里:Min-Cli使用手册
npm install -g @mindev/min-cli
2、初始化一个小程序项目。
min init my-project
选择 新建小程序 选项,即可初始化一个小程序项目。创建项目后,在编辑器中打开项目,src 目录为源码目录,dist 目录为编译后用于在微信开发者工具中指定的目录。新建的项目中已有一个 home
页面。详细文档:Min 初始化小程序项目
3、安装 loadmore 组件。
进入刚才新建的小程序项目的目录中:
cd my-project
安装组件:
min install @minui/wxc-loadmore
4、开启dev。
min dev
开启之后,修改源码后都会重新编译。
5、在页面中引入组件。
在编辑器中打开 src/pages
目录下的 home/index.wxp
文件,在 script
中添加 config
字段,配置小程序自定义组件字段,代码如下:
export default {config: {"usingComponents": {'wxc-loadmore': "@minui/wxc-loadmore"}}
}
wxc-loadmore
即为头像组件的标签名,可以在 wxml 中使用。
6、在 wxml 中使用 wxc-loadmore
标签。
在 home/index.wxp
文件的 template
中添加 wxc-loadmore
标签,代码如下:
<wxc-loadmore is-end="{{true}}"></wxc-loadmore>
7、打开微信开发者工具,指定 dist
目录,预览项目。
home/index.wxp
文件的代码如下所示:
<!-- home/index.wxp -->
<template><wxc-loadmore is-end="{{true}}"></wxc-loadmore>
</template><script>
export default {config: {usingComponents: {'wxc-loadmore': '@minui/wxc-loadmore'}},data: {}
}
</script><style>
</style>
图示:
至此,minui 组件库的 loadmore 页底组件在 Min 工具生成的小程序项目中的方法已介绍完毕,其他场景,在原生小程序或其他小程序框架项目中的使用方式请移步至如下链接:
在已有小程序项目中使用 MinUI 组件介绍
了解组件的使用方式后,下面开始介绍 loadmore 组件的 API 。
Loadmore【props】
名称 | 描述 |
---|---|
is-end
|
[说明]:是否到底。 [类型]: Boolean 默认值: true
|
icon
|
[说明]:图标。设为true的时候,调用默认图标 [类型]: String [默认值]: [到底]随机 / [加载] loading
|
text
|
[说明]:文案。 [类型]: String [默认值]: [到底]随机 / [加载] 加载中...
|
更多demo
1、只有文字到底
<template><wxc-loadmoreis-end="{{true}}"text="到底啦"></wxc-loadmore>
</template><script>
export default {config: {usingComponents: {'wxc-loadmore': '@minui/wxc-loadmore'}},data: {}
}
</script><style>
</style>
图示:
2、自定义 icon
<template><wxc-loadmoreis-end="{{true}}"text="到底啦"icon="https://s10.mogucdn.com/mlcdn/c45406/171016_47j96cl3hdhhdf7ajg8hg2kd13gdc_400x400.png"></wxc-loadmore>
</template><script>
export default {config: {usingComponents: {'wxc-loadmore': '@minui/wxc-loadmore'}},data: {}
}
</script><style>
</style>
图示:
3、自定义到底文案
<template><wxc-loadmore is-end="{{true}}" text="到底了~" icon="{{true}}"></wxc-loadmore>
</template><script>
export default {config: {usingComponents: {'wxc-loadmore': '@minui/wxc-loadmore'}},data: {}
}
</script><style>
</style>
图示:
4、加载中
<template><wxc-loadmore></wxc-loadmore>
</template><script>
export default {config: {usingComponents: {'wxc-loadmore': '@minui/wxc-loadmore'}},data: {}
}
</script><style>
</style>
图示:
5、加载中—自定义文案
<template><wxc-loadmoretext="正在努力加载中..."icon="{{true}}"></wxc-loadmore>
</template><script>
export default {config: {usingComponents: {'wxc-loadmore': '@minui/wxc-loadmore'}},data: {}
}
</script><style>
</style>
图示:
6、加载中—自定义icon
<template><wxc-loadmoretext="正在努力加载中..."icon="https://s10.mogucdn.com/mlcdn/c45406/171018_8gj08gbl9fj6igb380dec9k1ifhe2_32x32.png"></wxc-loadmore>
</template><script>
export default {config: {usingComponents: {'wxc-loadmore': '@minui/wxc-loadmore'}},data: {},methods: {}
}
</script><style>
</style>
图示:
更多组件更新同步请关注 MinUI
小程序组件库示例查看,或请移步到实时同步更新的 微信小程序 loadmore 页底组件使用文档。
沟通反馈
请添加群助手 wUf18018252882 好友或者扫码加好友,并与群助手对话发送验证码 10088
按照指引进群。
相关链接
- Min-Cli 官方仓库
- MinUI 官方仓库
- Min 官方文档
开源组件
布局元素
- flex 布局
- cc 水平垂直居中
基础元件
- avatar 头像
- badge 徽章
- elip 文本截断
- icon 图标
- label 标签
- loadmore 页底提示
- price 价格
- progress 进度条
功能组件
- abnor 异常流展示
- countdown 倒计时
- counter 数字框
- loading 加载提示
- mask 遮罩层
- steps 步骤条
- tab 选项卡
提示反馈
- dialog 对话框
- popup 弹出层
- toast 提示框
表单组件
- Coming soon ...
蘑菇街前端团队,2018.01.19 于杭州
微信小程序 MinUI 组件库系列之 loadmore 页底组件相关推荐
- 微信小程序使用第三方库(第三方js)问题
比如很多人会有这样的问题: 小程序怎样引用第三方js呢? 第三方js是封装好的类库 想引用进来实例化使用 这个帖子就综合一下所有相关的知识,做一个整合,以便大家能够集中了了解:我觉得这个还是应该让大家 ...
- 微信小程序中带参数返回上一页的方法总结(三种)
本篇文章给大家带来的内容是关于微信小程序中带参数返回上一页的方法总结(三种),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 方法一 把当前页面数据放入本地缓存( wx.setStor ...
- 微信小程序 MinUI 组件库系列之 abnor 异常流组件
MinUI 是基于微信小程序自定义组件特性开发而成的一套简洁.易用.高效的组件库,适用场景广,覆盖小程序原生框架.各种小程序组件主流框架等,并且提供了高效的命令行工具.MinUI 组件库包含了很多功能 ...
- 微信小程序 MinUI 组件库系列之 label 标签组件
MinUI 是基于微信小程序自定义组件特性开发而成的一套简洁.易用.高效的组件库,适用场景广,覆盖小程序原生框架.各种小程序组件主流框架等,并且提供了高效的命令行工具.MinUI 组件库包含了很多基础 ...
- 微信小程序 MinUI 组件库系列之 badge 徽章组件
MinUI 是基于微信小程序自定义组件特性开发而成的一套简洁.易用.高效的组件库,适用场景广,覆盖小程序原生框架.各种小程序组件主流框架等,并且提供了高效的命令行工具.MinUI 组件库包含了很多基础 ...
- 微信小程序 MinUI 组件库系列之 avatar 头像组件
MinUI 是基于微信小程序自定义组件特性开发而成的一套简洁.易用.高效的组件库,适用场景广,覆盖小程序原生框架.各种小程序组件主流框架等,并且提供了高效的命令行工具.MinUI 组件库包含了很多基础 ...
- 微信小程序 MinUI 组件库系列之 price 价格组件
MinUI 是基于微信小程序自定义组件特性开发而成的一套简洁.易用.高效的组件库,适用场景广,覆盖小程序原生框架.小程序组件化框架等,并且提供了高效的命令行工具.MinUI 组件库包含了很多基础的组件 ...
- 微信小程序 MinUI 组件库系列之 progress 进度条组件
MinUI 是基于微信小程序自定义组件特性开发而成的一套简洁.易用.高效的组件库,适用场景广,覆盖小程序原生框架.各种小程序组件主流框架等,并且提供了高效的命令行工具.MinUI 组件库包含了很多基础 ...
- 微信小程序 MinUI 组件库系列之 abnor 异常流组件 1
MinUI 是基于微信小程序自定义组件特性开发而成的一套简洁.易用.高效的组件库,适用场景广,覆盖小程序原生框架.各种小程序组件主流框架等,并且提供了高效的命令行工具.MinUI 组件库包含了很多功能 ...
最新文章
- webGL的一些咨询--web3D
- 社团的CTF逆向题WriteUp
- Scrapy八小时快速入门第一小时:安装,创建与执行我们的Scrapy爬虫
- android 模拟器Genymotion的安装和使用
- 链表题目----5 相交链表 和 环形链表 和 返回链表开始入环的第一个节点
- 计算机本地用户删除后怎么恢复,Default User文件夹被删了怎样恢复
- 携号转网,用户最关心的还是网络质量
- MySQL笔记(六)视图 view
- 老话长谈:通过windows下共享看第六代青年
- android执行命令行取得结果,Android调用shell脚本并取得输出
- 《设计模式详解》手写简单的 Spring 框架
- 荣耀10 原版android,荣耀V10新内置壁纸
- iOS8 UIAlertView键盘闪一下的问题
- JavaWeb之Servlet编程
- [C/C++11语法]_[0基础]_[lamba 表达式介绍]
- 初级程序员面试题总结(一):
- 3.4.4 Raucous Rockers“破锣摇滚”乐队 USACO
- CVPR 2019 | 「识面知心」——基于自监督学习的微表情特征表达
- JDK8中String的intern()方法详细解读【内存图解+多种例子+1.1w字长文】
- MS Outlook接收的附件显示文件损坏,真的吗?怎么办?
热门文章
- java编译器eclipse_Java 调用 Eclipse的编译器 JDT
- Leetcode 36:有效的数独(超详细的解法!!!)
- [CF_GYM102900L]Traveling in the Grid World
- 点微同城小程序配置教程及提交审核包过审经验分享
- 第一道西西里----关于两数的最大公约数
- 北航2012年软件工程硕士自主招生简章
- 安卓使用POI读取及修改Word文档(.doc格式)
- 服务器没有显示器能接笔记本吗,笔记本能连显示器吗_笔记本能不能接显示器...
- 最好的编程语言是怎样的?
- MAC OS 下QQ音乐下载存放的位置