微信小程序基础组件

• 一、视图容器（View Container）
  • 1、<view></view>
    功能：基本视图容器，类似于页面开发时的<div></div>标记对。
  • 2、<swiper></swiper>
    功能：滑动视图容器，用于实现轮播图效果。
    结构：一个swiper组件由多个swiper-item组成。

<swiper>
<swiper-item></swiper-item>
<swiper-item></swiper-item>
<swiper-item></swiper-item>
</swiper>

• 属性：

  • （1）indicator-dots，设置是否显示面板指示点。

  • （2）indicator-color，设置面板指示点颜色。

  • （3）indicator-active-color，设置面板中被选中的指示点颜色。

  • （4）autoplay，设置是否自动轮播。

  • （5）interval，设置轮播效果的切换时长，默认为5000毫秒。

  • （6）circular，设置是否循环播放。

  • （7）current，设置当前滑块的index值。

  • （8）previous-margin，设置前面一张图片露出的前边距。

  • （9）next-margin，设置后面一张图片露出的后边距。

  • （10）vertical，设置整个轮播效果是否为垂直排列。

• 注意：所有取值为逻辑值的属性，当设置为true时是表示为真。若需要表示为假，可以采用下列三种方法：（以vertical属性为例）

  • （1）不写vertical属性。

  • （2）vertical=“”

  • （3）vertical=“{{false}}”

• 二、基础内容（Basic Content）

  • 1、<text></text>
    功能：显示文本。
    属性：selectable，设置文本是否可选。

• 三、表单（Form）

  • 1、<input />
    功能：输入框。
    属性：value，设置输入框的初始内容。
    type，默认值为“text”，可以取值为text、number、idcard、digit。
    text-文本输入键盘 number-数字输入键盘 idcard-身份证输入键盘
    digit-带小数点的数字键盘
    password，设置输入框是否为密码域，取值为true、false。
    placeholder，设置输入框的占位文本。
    placeholder-style，设置占位文本的样式。
    placeholder-class，设置占位文本所属的类。
    disabled，设置输入框是否不可用。
    maxlength，设置输入框允许输入的最大字符个数。
    focus，设置输入框是否自动获得焦点并拉起键盘。
    confirm-type，设置键盘右下角按钮的文本，默认值为“done”。
    done-完成 send-发送 search-搜索 next-下一个 go-前往
    confirm-hold，设置点击键盘右下角按钮时是否保持键盘不收起。
  • 2、<button></button>
    功能：命令按钮。
    属性：size，设置命令按钮的大小， 取值为default、mini。
    type，设置命令按钮的样式类型，取值为primary(绿色)、default(白色)、warn(红色)。
    plain，设置命令按钮是否镂空，默认值为false。
    disabled，设置命令按钮是否不可用。
    loading，设置命令按钮文本前是否带有loading图标。
    form-type，设置命令按钮的类型。取值为submit、reset。

• 四、多媒体（Media）

  • 1、<image></image>

  功能：用于显示图片。

• 属性

  • （1）src，设置图片的路径和文件名。

  • （2）mode，设置图片的裁剪/缩放方式。

     取值：scaleToFil，不保持纵横比，使图片完全适应。
           aspectFit，保持纵横比，保证图片的长边完全显示出来。
           aspectFill，保持纵横比，保证图片的短边完全显示出来。
           widthFix，宽度不变，高度自动变化，保持纵横比。
           top，不缩放图片，只显示图片的顶部区域。
           bottom，不缩放图片，只显示图片的底部区域。
           center，不缩放图片，只显示图片的中部区域。
           left，不缩放图片，只显示图片的左侧部分。
           right，不缩放图片，只显示图片的右侧部分。
           top left，不缩放图片，只显示图片的左上区域。
           top right，不缩放图片，只显示图片的右上区域。
           bottom left，不缩放图片，只显示图片的左下区域。
           bottom right，不缩放图片，只显示图片的右下区域。
    

  • （3）lazy-load，设置图片是否懒加载。