微信小程序_组件学习_001
view标签
等效于html中的div
都是块级元素,独占一行,可设置宽高。
属性 | 类型 | 默认值 |
---|---|---|
hover-class | string | none |
hover的中文意思是悬浮,但在微信小程序里面是按下去的意思。
当用户按下按钮的时候生效。
text标签
等效于html中的span标签
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
user-select | boolean | false | 文本是否可选,该属性会使文本节点显示为 inline-block |
space | string | 无 | 显示连续空格 |
decode | boolean | false | 是否解码 |
user-select,就是是否允许用户进行选择,选择后会出现对话框(复制,粘贴)。
备注:这个效果只有真机可以测试出来,在微信小程序代码编辑器中无法显示。
space就是是否解析连续的空格。
众所周知,在html中文字中间有连续的空格的时候,html会解析成一个空格。详细解析
所以,微信小程序,对它进行了补充,允许解析连续空格。
<text>文字 中间 有空格
</text><text space="nbsp">文字 中间 有空格
</text>
加了 space=“nbsp” 后连续空格就别解析出来了。
推荐space使用属性nbsp,其余的不用去记,用不上。
decode属性就是表示是否解码
<text decode="true">中间 空格<;
</text>
可以用来解码
和 <等
navigator标签
等效于html中的a标签
navigator的中文含义是导航,字面意思,把你导向其他方向。
比如从主页跳转到logs页面
<navigator url="/pages/logs/logs">点我跳转到日志
</navigator>
这种默认打开后是二级页面的形式,左上角有个返回按钮。
如果不想二级页面,想作为一个新的页面,那么就在 open-type里面写上redirect。
<navigator url="/pages/logs/logs" open-type="redirect">点我跳转到日志
</navigator>
此时左上角就是一个小屋子图标。
icon标签
见名知意,用于显示图标。
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
type | string | 是 | icon的类型,有效值:success, success_no_circle, info, warn, waiting, cancel, download, search, clear | |
size | number/string | 23 | 否 | icon的大小 |
color | string | 否 | icon的颜色,同css的color |
<icon type="success" size="60" class="box"></icon>
type的有效值有:success, success_no_circle, info, warn, waiting, cancel, download, search, clear
scroll-view标签
你可以把它理解成手机端的滚动条,可以横着滚,也可以竖着滚。
属性 | 默认值 | 必填 | 说明 |
---|---|---|---|
scroll-x | false | 否 | 允许横向滚动 |
scroll-y | false | 否 | 允许纵向滚动 |
滚动条demo
<scroll-view scroll-x><view class="out"><icon type="success" size="60" class="box"></icon><icon type="success_no_circle" size="60" class="box"></icon><icon type="info" size="60" class="box"></icon><icon type="warn" size="60" class="box"></icon><icon type="waiting" size="60" class="box"></icon><icon type="cancel" size="60" class="box"></icon><icon type="download" size="60" class="box"></icon><icon type="search" size="60" class="box"></icon><icon type="clear" size="60" class="box"></icon></view>
</scroll-view>
.out{display: flex;flex-wrap: nowrap;
}
微信小程序_组件学习_001相关推荐
- 微信小程序_(组件)flex布局
小程序建议使用flex布局进行排版 flex是一个盒装弹性布局 flex是一个容器,所有子元素都是他的成员 定义布局:display:flex flex容器的属性: 一.flex-direction: ...
- 微信小程序_基础组件学习02
微信小程序_基础组件学习02 swiper组件 swiper是滑块容器,也就是手机端的轮播图. swiper组件有两部分组成swiper和swiper-item. swiper-item需要放在swi ...
- 小程序子组件向父组件传值_一套组件化、可复用、易扩展的微信小程序 UI 组件库...
如何使用 Wux Weapp 是一套组件化.可复用.易扩展的微信小程序 UI 组件库.在开始使用之前,需要先阅读微信小程序自定义组件的相关文档. 通过 npm 安装,需要依赖小程序基础库 2.2.1 ...
- 微信小程序image组件开发程序以及相关图片问题参考资料汇总
微信小程序image组件开发程序以及相关图片问题参考资料汇总,希望对大家小程序开发能有一定的参考和借鉴价值.以下汇总主要涉及到微信小程序image组件有关资源路径.缩放和剪裁模式等进行的探讨,无论是对 ...
- 微信小程序自定义组件,提示组件
微信小程序自定义组件,这里列举了一个常用的提示自定义组件,调用自定义组件中的方法和字段.仅供参考和学习. 编写组件: 在根目录下添加"components"目录,然后像添加Page ...
- 微信小程序_小程序开发框架
微信小程序_小程序开发框架 微信小程序框架 微信小程序小程序开发框架的目标是通过尽可能简单.高效的方式让开发者可以在微信中开发具有原生APP体验的服务. 框架提供了自己的视图层描述语言WXML和WXS ...
- 微信小程序自定义组件(二)
微信小程序自定义组件 ps 由于作业部落貌似出了点问题,耽误了点时间,找了一个stackedit.io准备写.无奈,这是要自己建编辑器的节奏啊.没有一个能靠的注 为何存在组件 组件间的关系 使用rel ...
- 微信小程序_(校园视)开发视频的展示页_上
微信小程序_(校园视) 开发用户注册登陆 传送门 微信小程序_(校园视) 开发上传视频业务 传送门 微信小程序_(校园视) 开发视频的展示页-上 传送门 微信小程序_(校园视) 开发视频的展示页-下 ...
- 微信小程序 MinUI 组件库系列之 abnor 异常流组件
MinUI 是基于微信小程序自定义组件特性开发而成的一套简洁.易用.高效的组件库,适用场景广,覆盖小程序原生框架.各种小程序组件主流框架等,并且提供了高效的命令行工具.MinUI 组件库包含了很多功能 ...
最新文章
- 从0实现一个tinyredux
- 学python可以干嘛-学习Python可以做什么
- MVC的概念及MVC 3.0开发环境
- docker-engine安装好了,下一步该做什么?
- 2015年4月8日主从不同步故障解决(字符集导致)
- 使用循环链表解决约瑟夫环问题
- 叮!请查收本周份「知识图谱」专题论文解读
- Tiled 瓦片地图
- 如何下载python2.7.16_CENTOS6.5 安装PYTHON2.7.16
- CodeIgniter的伪静态配置
- 汇编语言王爽第四版 实验四(包括对【bx】,loop详解)
- Android apk 系统签名
- 基于JavaSwing开发中国象棋对战游戏+实验报告 课程设计 大作业
- FastDFS使用之文件名称
- Gstore官网学习一:知识图谱与gStore介绍
- 如何正确的打开google
- 计算机用的云电脑,玩家怎么才能将家用电脑变成云电脑?
- spring源码解析(一)迈向学习spring之路
- 深度学习、目标检测情景中常见的模型评测指标
- springboot+vue+elementUI 高校学生实习管理管理系统 #毕业设计