微信小程序基础组件

快来打我* 2023-06-13 03:23 131阅读 0赞

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

*  **属性：**
    
     *  （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，设置图片是否懒加载。