微信小程序之组件（一）

最新推荐文章于 2024-10-09 09:35:08 发布

淼学派对

最新推荐文章于 2024-10-09 09:35:08 发布

阅读量1.9k

点赞数 3

分类专栏：微信小程序文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/lbcyllqj/article/details/127096342

版权

微信小程序专栏收录该内容

27 篇文章 27 订阅

订阅专栏

什么是组件

组件是视图层的组成单元，具有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>

效果展示：