微信小程序之组件（一）

view容器时页面中最基本的容器组件，通过高度和宽度来定义容器的大小。相当于html中的

标签，是一个页面中最外层的容器，能够接受其他组件的嵌入，例如：多个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">元素1view>
    <view class="lqj2">元素2view>
    <view class="lqj3">元素3view>
    <view class="lqj2">元素4view>
    <view class="lqj1">元素5view>
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">元素1view>
    <view class="lqj2">元素2view>
    <view class="lqj3">元素3view>
    <view class="lqj2">元素4view>
    <view class="lqj1">元素5view>
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

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

重要属性：

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：

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

属性：

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

success：

success_no_circle:

info：

warn:

waiting:

cancel:

download：

search:

clear：

代码：


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

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

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

2.text：

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

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

3.progress：

重要属性：

percent：百分比0%~100%

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

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

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

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

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

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

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

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

代码：

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

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

效果展示：

什么是组件

视图容器组件

一、view