什么是组件

组件是视图层的组成单元，具有UI风格样式及特定的功能效果。当打开某款小程序后，界面中的图片，文字等多需要使用组件，小程序组件使用灵活，组件之间通过相互嵌套进行界面设计，开发者可以通过组件的选择和样式属性设计出不同的界面效果，一个组件开始包括标签和结束标签，属性用来装饰这个组件的样式。

语法格式:

<标签名称 属性 = "值">

内容

</标签名称>

示例代码如下：

<button class="btn">我是按钮组件</button>

上述代码用<button></button>表示一个按钮组件，在<button>标签中通过class="btn"为<button>组件添加样式btn。

视图容器组件

一、view

view容器时页面中最基本的容器组件，通过高度和宽度来定义容器的大小。<view>相当于html中的<div>标签，是一个页面中最外层的容器，能够接受其他组件的嵌入，例如：多个view容器的嵌套。view容器可以通过flex布局自定义内部项目的排列方式。（我们这里先不讲flex布局，后面会讲到！）

其中view包含四个属性：

1.hover(默认值为：false)

这个没什么好说的哈~

2.hover-class（默认值为:none）

效果展示：

上面的意思是，当我们不点击时，方块默认的颜色为红色，当我们点击或者长按时，方块的颜色变为蓝色！（一直按住，就一直显示蓝色！）

3.hover-stop-propagation(默认值为:false)

这是可以扎尔杨解释，，因为红色的方块在棕色的方块内，当我们用上面的hover-class属性（点击红色的方块，想要将将红色的方块去变成蓝色的时候，这里小程序默认我们一起连带着大的棕色的方块也一起点击了，如果这是大的棕色的方块也用上面的方法hover-class再点击大方块时，大方块就变成绿色。此时我们如果不设置hover-stop-propagation这个属性，当我们点击红色的方块时，红色的的方块变成蓝色的同时，棕色的大方块也变成绿色！）

效果演示（不设置hover-stop-propagation属性也就是说hover-stop-propagation属性为默认值false的时候）：

效果演示（设置hover-stop-propagation属性也就是说hover-stop-propagation属性为true的时候）：

4.hover-start-time(默认值为50ms)

解释：按住方块后多久才能出现变换效果（这里我设置的是1000ms），所以点击后不会立即改变颜色，会等上1000ms后在进行变换！

 <view class="lqj1" hover-class="lqj2"hover-start-time="1000"></view>

5.hover-stay-time（默认值为400ms）

解释：这个属性是点击松开后，变换的效果持续多长时间！

 <view class="lqj1" hover-class="lqj2"hover-stay-time="1500"></view>

二、scroll-view

scroll-view容器为可滚动的视图容器，允许用户通过手指在容器上滑动来改变显示区域，常见的滑动方向有：

水平滑动：scroll-x（默认值为false）

<scroll-view scroll-x="true"><view class="lqj1">元素1</view><view class="lqj2">元素2</view><view class="lqj3">元素3</view><view class="lqj2">元素4</view><view class="lqj1">元素5</view>
</scroll-view>scroll-view{height: 100%;width: 100%;background-color: greenyellow;white-space:nowrap;
}
.lqj1{display: inline-block;height: 200rpx;width: 200rpx;background-color: red;
}
.lqj2{display: inline-block;height: 200rpx;width: 200rpx;background-color: blue;
}
.lqj3{display: inline-block;height: 200rpx;width: 200rpx;background-color: rgb(255, 0, 212);
}

注意设置了 scroll-x=“true”，但是只是这一个属性是实现不了横向滑动的scroll-view的，还需要在.wxss里面加上如下代码 ：
给scrollview本身添加： white-space:nowrap;这个属性，直接子view添加： display: inline-block; 这个属性才能实现想要的横滑

垂直滑动：scroll-y（默认值为none）

<scroll-view scroll-y="true"><view class="lqj1">元素1</view><view class="lqj2">元素2</view><view class="lqj3">元素3</view><view class="lqj2">元素4</view><view class="lqj1">元素5</view>
</scroll-view>scroll-view{height: 600rpx;width: 200rpx;background-color: greenyellow;}.lqj1{height: 200rpx;width: 200rpx;background-color: red;}.lqj2{height: 200rpx;width: 200rpx;background-color: blue;}.lqj3{height: 200rpx;width: 200rpx;background-color: rgb(255, 0, 212);}

三、swiper

<swiper>组件为滑动块视图容器，通常用于图片之间的切换播放，被形象的成为"轮播图"

重要属性：

indicator-dots（默认值：false）是否显示面板指示点

indicator-color：（默认值：rgba（0，0，0，0.3））指示点的颜色

indicator-active-color：（默认值：#000000）当前选择的指示点颜色

autoplay：（默认值：false）是否自动切换

interval：（默认值：5000ms）自动切换时间间隔

<view><swiper indicator-dots="true" autoplay="true" interval="2000"><swiper-item><image src="/imaegs/2.jpg"></image></swiper-item><swiper-item><image src="/imaegs/2.jpg"></image></swiper-item><swiper-item><image src="/imaegs/2.jpg"></image></swiper-item>
</swiper>
</view>swiper{margin:50rpx ;height: 500rpx;
}

以上是正常的写法！

当然我之前页自创了一种写轮播图的效果，会用到js哈~

js：

 imgUrls: ['cloud://shangcheng-1gv76n6pf3af957d.7368-shangcheng-1gv76n6pf3af957d-1312670923/轮播图/7.jpg','cloud://shangcheng-1gv76n6pf3af957d.7368-shangcheng-1gv76n6pf3af957d-1312670923/轮播图/1.jpg','cloud://shangcheng-1gv76n6pf3af957d.7368-shangcheng-1gv76n6pf3af957d-1312670923/轮播图/5.jpg','cloud://shangcheng-1gv76n6pf3af957d.7368-shangcheng-1gv76n6pf3af957d-1312670923/轮播图/22.jpg' ],indicatorDots: true,  //是否显示面板指示点autoplay: true,      //是否自动切换interval: 2000,       //自动切换时间间隔duration: 300,       //滑动动画时长

wxml：

<view><swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"><block wx:for="{{imgUrls}}" wx:key="index"><swiper-item class="LB_a"><image class="LB_b"  src="{{item}}" /></swiper-item></block></swiper>
</view>

效果：

基础内容组件

1.icon：

<icon>为图标组件，常用于页面装饰，开发者可以自定义其类型、大小和颜色。

属性：

type（默认值：false）icon类型：

success：

success_no_circle:

info：

warn:

waiting:

cancel:

download：

search:

clear：

代码：

<icon type="success" size="40" color="green"></icon>
<text>\n</text>
<icon type="success_no_circle" size="40" color="green"></icon>
<text>\n</text>
<icon type="info" size="40" color="green"></icon>
<text>\n</text>
<icon type="warn" size="40" color="green"></icon>
<text>\n</text>
<icon type="waiting" size="40" color="green"></icon>
<text>\n</text>
<icon type="cancel" size="40" color="green"></icon>
<text>\n</text>
<icon type="download" size="40" color="green"></icon>
<text>\n</text>
<icon type="search" size="40" color="green"></icon>
<text>\n</text>
<icon type="clear" size="40" color="green"></icon>

size：（默认值：23px）icon的大小，单位：px

color：（#000000）icon的颜色，通css的color

2.text：

<text>为文本组件，用于文字的显示，小程序的文本组件支持转义字符。

对于新手来说，现在只知道它只能作为文本的标签就好哈~以后还会讲到！

3.progress：

重要属性：

percent：百分比0%~100%

show-info:（默认值：false）在进度条右侧显示百分比

border-radius：（默认值：0）边角圆角的大小

font-size：（默认值：16）右侧百分比字体大小

stroke-width：（默认值：6）进度条的宽度

color：（默认值：#09BB07）进度条的颜色

active：（默认值：false）进度条从左到右的动画

<progress>为进度条组件，用于进度条的显示，长度单位默认为px。

这里我们对于新手先能够写出静态的即可，慢慢来，以后还会讲到！

代码：

<progress percent="30" stroke-width="100rpx" show-info="true"></progress>

 因为我的percent里面写的是30而且我又写了show-info所以右侧会以半分比的形式显示在最右边

效果展示：

 表单组件

一、button

<button>为按钮组件，是常用的表单组件之一，用于事件的触发以及表单的提交。

重要属性：

size：按钮大小

type:按钮样式类型

plain：（默认值：false）按钮是否镂空，背景色透明

disabled:（默认值：false）是否禁用（该按钮）

loading：（默认值：false）名称前是否带loading图标

form-type:用于<form>组件，点击分别会触发<form>组件的submit/reset事件

open-type：微信开放能力（微信自带的开放能力，具体是什么能力呢，先不告诉你，后面会讲到！）

效果展示：

让你们认识认识button

<button type="primary">我是button按钮</button>

二、checkbox

<checkbox>为复选框组件，常用于在表单中进行多项数据的选择。

复选款的<checkbox-group>为父控件，其内部嵌套若干个<checkbox>子控件

checkbox-group重要属性（先不说）

checkbox重要属性：

value：（先不说，以后会讲到！）

disabled：（默认值：false）是否禁用

checked：（默认值：false）当前是否选中，可用来设置默认选中
color：checkbox的颜色，同css的color

只是显示一下静态的效果，因为有一些关于js的内容，新手不太好消化，没关系，以后会讲到的！

代码：

<checkbox-group><checkbox value="tiger">老虎</checkbox><checkbox value="tiger">大象</checkbox><checkbox value="tiger">老鼠</checkbox><checkbox value="tiger">狮子</checkbox><checkbox value="tiger">蛇</checkbox><checkbox value="tiger">青蛙</checkbox>
</checkbox-group>

效果展示：

三、input

<input>为输入框组件，常用于文本（如姓名，年龄等信息）的输入

重要属性：

type：（默认值：‘text’）input的类型

type类型：text（文本输入键盘）number(数字输入键盘)idcard（身份证输入键盘）digit（带小数点的数字键盘）

我的另一篇：

微信小程序（逻辑层的全部知识点）保姆级讲解_lqj_本人的博客-CSDN博客 中的3.事件对象右展示！

password：（默认值：false）是否是密码类型

maxlength：（默认值：140）最大输入长度，设置为-1时，则不限制长度

focus：（默认值：false）获取焦点，自动拉起手机键盘

adjust-position：（默认值：true）键盘弹起时，是否自动上推页面

confirm-type：（默认值：done）设置键盘右下角按钮的文字，仅在type=‘text’时生效

confirm-type重要类型：send（右下角为：发送）search（右下角为：搜索）next（右下角为：下一个）go(右下角为：前往)done（右下角为：完成）

confirm-hold：（默认值：false）点击键盘右下角按钮时是否保持键盘不收起

四、form

<form>为表单控件组件，用于提交表单组件中的内容。

<form>控件组件内部可以嵌套：

1.<input>输入框组件

2.<button>按钮组件

3.<checkbox>复选框组件

4.<switch>开关选择器

5.<radio>单选框组件

6.<picker>滚动选择器

7.<slider>滑动选择器
8.<textarea>多行输入框

9.<label>标签组件

五、picker

<picker>为滚动选择器，从页面底部弹出供用户选择，根据mode属性值的不同共有5中选择器：

1.普通选择器：

mode="selector"

2.多列选择器：

mode="multiSelector"

3.事件选择器：

mode="time"

4.日期选择器：

mode="date"

5.省份区选择器：

mode="region"

微信小程序之组件（一）相关推荐

  1. 微信小程序image组件开发程序以及相关图片问题参考资料汇总

    微信小程序image组件开发程序以及相关图片问题参考资料汇总,希望对大家小程序开发能有一定的参考和借鉴价值.以下汇总主要涉及到微信小程序image组件有关资源路径.缩放和剪裁模式等进行的探讨,无论是对 ...

  2. 小程序子组件向父组件传值_一套组件化、可复用、易扩展的微信小程序 UI 组件库...

    如何使用 Wux Weapp 是一套组件化.可复用.易扩展的微信小程序 UI 组件库.在开始使用之前,需要先阅读微信小程序自定义组件的相关文档. 通过 npm 安装,需要依赖小程序基础库 2.2.1 ...

  3. 微信小程序自定义组件方案

    前言:小程序已于11月初开放了小程序组件功能,但事件方面还不是很完善,有的组件暂时可能还是要用其他方式来实现,这里简单记录下开发小程序自定义组件的要点. 在小程序官方开发组件开发功能之前,自定义组件的 ...

  4. uniapp 判断页面是否是横竖屏,解决微信小程序video组件全屏播放视频遮盖自定义播放控件问题

    如果res.deviceOrientation 等于landscape 的话是竖屏,portrait则是横屏.因为用户每旋转一次屏幕就会触发里面的onShow钩子,因此在页面显示或横竖屏变化都会触发这 ...

  5. 微信小程序自定义组件，提示组件

    微信小程序自定义组件,这里列举了一个常用的提示自定义组件,调用自定义组件中的方法和字段.仅供参考和学习. 编写组件: 在根目录下添加"components"目录,然后像添加Page ...

  6. php小程序onload,微信小程序 loading 组件实例详解

    这篇文章主要介绍了微信小程序 loading 组件实例详解的相关资料,需要的朋友可以参考下 loading通常使用在请求网络数据时的一种方式,通过hidden属性设置显示与否 主要属性: wxml 显 ...

  7. 手把手教你写一个微信小程序日历组件

    今天我们一起写一个微信小程序日历组件 微信小程序日历组件 github.com/749264345/w- 好,我们先看一下要实现的模样,如下图 由以上截图我们可以看到 1.日历可以通过按钮[切换展示效 ...

  8. 微信小程序自定义组件(二)

    微信小程序自定义组件 ps 由于作业部落貌似出了点问题,耽误了点时间,找了一个stackedit.io准备写.无奈,这是要自己建编辑器的节奏啊.没有一个能靠的注 为何存在组件 组件间的关系 使用rel ...

  9. 微信小程序|area组件使用的地址数据文件plus

    area组件使用的地址数据文件 前言 1.解析json的地址转换为area.js的格式 2.转换格式的java代码 3.运行结果截图示意 前言 实战篇内容参考: 1.腾讯的全球地址数据文件及Xml-& ...

  10. 微信小程序 MinUI 组件库系列之 abnor 异常流组件

    MinUI 是基于微信小程序自定义组件特性开发而成的一套简洁.易用.高效的组件库,适用场景广,覆盖小程序原生框架.各种小程序组件主流框架等,并且提供了高效的命令行工具.MinUI 组件库包含了很多功能 ...

最新文章

  1. jax_ws_对状态代码使用JAX-RS异常
  2. 2013年全球ERP市场格局（Gartner）
  3. 关于 Google Chrome 操作系统的 5 个问题
  4. jzoj4803-[NOIP2016提高A组模拟9.28]求导【模拟】
  5. 实现滚到div时淡入效果
  6. 玩转算法之面试-第六章（栈和队列）
  7. 35岁大龄程序员都去哪了？一位网友分享的身边几个真实案例，过于真实！！
  8. Orleans 3.0 发布，微软下一代云计算编程模式
  9. 【python】导入HTMLTestRunner失败---报错ModuleNotFoundError: No module named ‘HTMLTestRunner‘
  10. 神奇的go语言（开始篇）
  11. cppcheck下载及使用
  12. 实习商汤，校招华为，我的深度学习之路
  13. CCNA考试题库中英文翻译版及答案2
  14. php webqq登陆,Smart QQ——腾讯新一代网页版 WebQQ，更简洁纯粹的实用在线聊天工具！...
  15. pentaho发布报表后免登陆查看数据报表
  16. 用border-color 的 transparent 制作一个三角形
  17. skinsdog 狗网CSGO开箱地址!csgo开箱网站官网!
  18. 测试参持之以恒兵勋章活动
  19. Liip-imagine-bundle 在 Nignx 无法生成缓存图的问题
  20. 迅为RK3568开发板Debian系统安装ToDesk

热门文章

  1. 人到中年意如何？创业艰难百战多
  2. 介绍一款Java程序，听说撑过1分钟不卡的都是神机
  3. WP8.1 Study17：网络之后台下载/上传及HttpClient
  4. 2023年全国职业院校技能大赛-软件测试赛题第8套 - GZ034 软件测试
  5. pkg-config / CFLAGS
  6. 自动化测试面试题【含答案】
  7. 解决ajax在chrome中正常，在IE中不正常的问题
  8. 简约大气的404错误页面动画js特效
  9. java 字符串 转 文件路径_连接用户输入字符串转换为完整的文件路径（Java）
  10. JAVA计算机毕业设计全屋家具定制网站（附源码、数据库）