• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序的组件总结

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

本文介绍微信小程序的组件

视图容器
基础内容
表单组件
导航组件
媒体组件

  1. 视图容器
    • view
    布局容器
    <view hover-class=\'bg\'>222</view>
    可以添加的属性如下
    hover-class 点击展示的类名
    hover-stop-propagation 是否阻止冒泡
    hover-start-time 点击多久出现hover效果
    hover-stay-time 点击取消hover效果持续时间
    
    • scroll-view
    可滚动容器
    <scroll-view style="height: 200rpx;" scroll-y scroll-into-view="aa">
        <view style="height: 100rpx;background: red;">111</view>
        <view style="height: 100rpx;background: yellow;" id="aa">222</view>
        <view style="height: 100rpx;background: black;" >333</view>
    </scroll-view>
    可用的属性如下
        scroll-x 是否允许横向滚动
        scroll-top="20" 设置纵向滚动条位置
        scroll-left="20" 设置横向滚动条位置
        scroll-into-view 指定哪个要显示的子元素的id
        scroll-with-animation 设置滚动定位时,是否显示动画
        enable-back-to-top 是否,双击回顶部(安卓),单击回顶部(苹果)
        bindscrolltoupper 滚动到头部触发事件
        bindscrolltolower 滚动到尾部触发事件
        bindscroll 滚动时触发事件
        upper-threshold="50" 设置scrolltoupper距离顶部触发的距离
        lower-threshold 设置scrolltolower距离顶部触发的距离
    
    • swiper
    轮播图组件
    imgUrls: [
      \'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg\',
      \'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg\',
      \'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg\'
    ]
    <swiper indicator-dots="true" style="width:300rpx;">
        <block wx:for="{{imgUrls}}">
            <swiper-item>
                <image src="{{item}}" width="355" height="150"/>
            </swiper-item>
        </block>
    </swiper>
    可用属性如下
        indicator-dots 是否显示指示点
        indicator-color="rgba(0,0,0,0.1)" 未选中指示点颜色
        indicator-active-color="#1aad16" 选中指示点颜色
        current=\'1\' 设置当前展示图片的索引
        autoplay 是否自动播放
        interval=\'1000\' 自动切换时间间隔
        duration 设置动画持续时间
        circular 是否循环播放图片
        vertical 是否纵向轮播
        bindchange 图片索引触发事件,event.detail.current获取当前索引
    
    • movable-view
    可移动区域
    <movable-area style="height: 500rpx;width: 500rpx;background: red;">
        <movable-view style="height: 50rpx;width: 50rpx;background: blue;" direction="all">
        </movable-view>
    </movable-area>
    可用属性如下
        direction 可移动的方向,属性值有all、vertical、horizontal、none
        inertia 滑动是否有惯性,可以设置friction="10" 来设置摩擦系数,控制惯性大小
        out-of-bounds 滑块是否可以超过边界,可以设置阻尼系数damping="50",设置反弹的大小
        x="50" 初始x偏移量,阻尼系数也可以用于手动设置x,y的过渡动画
        y="50" 初始y偏移量
    
    • cover-view
    覆盖于原生组件之上的容器,map、video、canvas、camera
    <video>
        <cover-view>
            <cover-viewbindtap="play">
                <cover-image src="../../images/t1.jpg" />
            </cover-view>
            <cover-view>00:00</cover-view>
        </cover-view>
    </video>
    
  2. 基础内容
    • icon
    内置图标 <icon type="success" size="25" color="green"></icon>
    可用属性如下
        type 设置icon的类型,success, success_no_circle, info, warn, waiting, cancel, download, search, clear
        size 设置icon的大小
        color 设置icon的颜色
    
    • text
    文本组件 <text selectable=\'true\' decode=\'true\'>11&nbsp;1</text>
    可用属性如下
        selectable 文字是否可选择
        decode 是否可以解码&nbsp; &lt; &gt; &amp; &apos; &ensp; &emsp;特殊字符
    
    • rich-text
    富文本组件
    <rich-text nodes="{{nodes}}"></rich-text>
    nodes: [{
        name: \'div\', // 标签名
        attrs: { // 标签的属性
            class: \'div_class\',
            style: \'line-height: 60px; color: red;\'
        },
        children: [{ // 子节点
            type: \'text\', // 文本类型
            text: \'Hello&nbsp;World!\'
        }]
    }]
    
    • progress
    设置进度条 <progress percent="20" show-info style="width: 400rpx;"/>
    可用属性如下
        percent 百分比
        show-info 是否显示文字百分比
        stroke-width="20" 设置进度条的高度
        activeColor="red" 设置已读进度条的颜色
        backgroundColor="black" 设置未读进度条的颜色
        active 是否显示进度条动画
        active-mode="forwards" 动画从头播backwards,动画从上次结束点接着播forwards
    
  3. 表单组件
    • button
    按钮组件 <button type="primary" size="mini"> 222 </button>
    可用属性如下
        type 指定按钮的类型 primary default warn 
        size 设置按钮大小 default mini
        plain 去掉按钮背景色
        disabled 按钮禁用
        loading 是否展示loading动画
        hover-class 点击态类
        hover-stop-propagation 点击态是否冒泡
        hover-start-time 点击态开始时间
        hover-stay-time 点击态持续时间
        form-type 配合form表单组件使用,submit reset
        open-type 打开微信的开放功能
            contact 打开客服对话窗口
                contact还可以配合如下属性使用
                    show-message-card 是否开启分享卡片
                    send-message-title 设置分享卡片的标题
                    send-message-path 分享卡片的路径
                    send-message-img 分享卡片的封面图片
                    bindcontact 用户打开会话的回调
            share 打开分享界面
            getUserInfo 获取用户信息,对应的绑定事件是 bindgetuserinfo
                <button type="primary" open-type="getUserInfo" bindgetuserinfo=\'myFn\'>3</button>
                myFn: function(obj) {}
                还可以设置lang属性,控制用户信息的语言 zh_CN zh_TW en 
            getPhoneNumber 获取用户手机号,对应的绑定事件是 bindgetphonenumber
    
    • checkbox
    复选框组件
        <checkbox-group bindchange="myFn">
            <label> <checkbox value="男"/> 男 </label>
            <label> <checkbox value="女"/> 女 </label>
        </checkbox-group>
    checkbox-group可用属性如下
        bindchange 绑定选择回调
    checkbox可用属性如下
        value 设置复选框值
        disabled 是否禁用
        checked 是否选中
        color 设置复选框选中的颜色
    
    • form
    表单提交组件
        <form bindsubmit=\'myFn\' bindreset=\'myFn1\'>
            <checkbox-group name="cbox">
                <label> <checkbox value="男"/> 男 </label>
                <label> <checkbox value="女"/> 女 </label>
            </checkbox-group>
            <view>
            <button form-type=\'submit\'>提交</button>
            <button form-type=\'reset\'>重置</button>
            </view>
        </form>
    每一个表单组件都需要使用name属性,作为提交的字段名
    
    • input
    表单输入组件
        <input placeholder=\'请输入...\'></input>
    可用属性如下
        value 设置表单的值
        type 输入框的类型 text number idcard digit
        password 是否密码框
        placeholder 占位符
        placeholder-style 占位符样式
        placeholder-class 占位符类
        disabled 是否禁用
        maxlength 最大输入长度
        focus 自动聚焦
            配合cursor可以设置光标位置
        confirm-type 设置键盘右下角按钮 send search next go done
        confirm-hold 点击右下角按钮是否是否收起键盘
        bindinput 用户输入事件
        bindfocus 用户聚焦事件
        bindblur 用户失去焦点事件
        bindconfirm 点击右下角按钮事件
    
    • label
    label控件,和一般的html写法一样
    <label for="id">聚焦</label>
    <input id="id" placeholder=\'请输入...\'></input>
    
    • picker
    选择器控件 <picker range=\'{{[1,2,3,4,5]}}\'>选择器</picker>
    可用属性如下
        mode 设置选择器类型
            selector 默认的普通选择器
                range 设置选择的item
                value="2" 设置选中的item索引
                disabled 是否禁用
                bindchange 改变事件
            multiSelector 多选选择器
                <picker mode="multiSelector" range=\'{{[[1,2,3,4,5], [1,2,3,4,5]]}}\' value="{{[1,2]}}">选择器</picker>
                属性同上,不过多了一个bindcolumnchange,单个列值改变触发
            time 事件选择器
                <picker mode = "time" value="12: 00">选择器</picker>
                value 设置时间值
                bindchange 改变事件
                disabled 是否禁用
            date 日期选择器
                <picker mode = "date" value="2017-06-01\'\'">选择器</picker>
                fields="year" 只显示指定的日期部分 year month day
            region 省市级联选择器
                <picker mode = "region" value="{{[\'湖北省\', \'武汉市\', \'武昌区\']}}">选择器</picker>
                custom-item="全部" 添加额外项
    
    • picker-view
    自定义选择器
        <view style="width: 100%; height: 300px;">
            <picker-view style="width: 100%; height: 100%;" value="{{[0,1,2]}}">
                <picker-view-column>
                    <view>11</view>
                    <view>22</view>
                    <view>33</view>
                </picker-view-column>
                <picker-view-column>
                    <view>11</view>
                    <view>22</view>
                    <view>33</view>
                </picker-view-column>
                <picker-view-column>
                    <view>11</view>
                    <view>22</view>
                    <view>33</view>
                </picker-view-column>
            </picker-view>
        </view>
    picker-view可用属性如下
        value 设置item索引值
        indicator-style 设置选择器样式
        indicator-class 样式类名
        mask-style 遮罩层样式
        mask-class 遮罩层类名
        bindchange 改变事件
    picker-view-column 只是选择器列的容器
    
    • radio
    单选组件
        <radio-group>
            <label> <radio value="男" /> 男 </label>
            <label> <radio value="女" /> 女 </label>
        </radio-group>
    radio-group可用属性
        bindchange
    radio可用属性
        value 设置单选框值
        checked 是否选中
        disabled 是否禁用
        color 选中颜色
    
    • slider
    滑动条选择器
        <slider step=\'1\'></slider>
    可用属性如下
        min 设置最小值
        max 设置最大值
        step 滑动步长 (要求能被max-min整除)
        disabled 是否禁用
        value 设置初始值
        backgroundColor 选择条的背景颜色
        activeColor 选择条选中部分的颜色
        show-value 是否显示选中的值
        bindchange 拖动,手松开是触发
        bindchanging 拖动,手不松开一直触发
    
    • switch
    切换按钮组件 <switch></switch>
    可用属性如下
        checked 是否选中
        type 组件类型,默认switch,可以设置成checkbox复选框
        bindchange 改变事件
        color 选中的颜色
    
    • textarea
    文本域组件 <textarea style="border: 1px solid #ccc;"></textarea>
    可用属性如下
        value 文本框值
        placeholder 占位符
        placeholder-style 占位符样式
        placeholder-class 占位符类
        disabled 是否禁用
        maxlength 最大输入长度
        auto-focus 聚焦
        auto-height 自动增高
        fixed 父元素是fixed,需要设置此属性
        cursor 设置光标的位置
        show-confirm-bar 是否显示键盘完成栏
        bindfocus 聚焦时触发
        bindblur 失去焦点触发
        bindlinechange 输入框换行触发
        bindinput 输入时触发
        bindconfirm 点击完成触发
    
  4. 导航组件
    • navigator
    页面跳转组件 <navigator url="/pages/logs/logs" >跳转到新页面</navigator>
    可用属性如下
        url 设置跳转链接
        open-type 设置跳转方式
            navigate 跳转指定页面(非tabbar页)
            redirect 跳转指定页面(非tabbar页,并且销毁当前页) 
            switchTab 跳转到tabbar页
            reLaunch 销毁所有页面,跳转到任意指定页
            navigateBack 后退,配合delta属性,设置回退层数
        hover-class 点击类
        hover-stop-propagation 点击态是否冒泡
        hover-start-time 点击态开始出现时长
        hover-stay-time 点击结束点击态持续时间
    
  5. 媒体组件
    • audio
    播放音乐组件 <audio controls src="/刘若英 - 念念.mp3"></audio>
    可用属性如下
        id 设置组件id
        src 音乐文件路径
        loop 是否循环播放
        controls 是否显示默认控件
        poster 封面图片
        name 音乐名字
        author 音乐作者
        binderror 发生错误触发事件
        bindplay 开始播放触发
        bindpause 暂停播放触发
        bindtimeupdate 播放进度改变触发
        bindended 播放结束触发
    
    • image
    图片组件 <image style="width: 500rpx; height: 500rpx; background-color: #eeeeee;"src="http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg"></image>
    可用属性如下 
        src 图片路径
        mode 图片模式,所有的模式如下
            scaleToFill 默认值,拉伸图片占满image元素
            aspectFit 保持图片原始比例
            aspectFill 保持原始比例,显示一部分
            widthFix 原始比不变,宽度固定,高度自适应
            top 保持图片原始大小,只显示头部
            bottom, center, left, right, top left, top right, bottom left, bottom right
    
    • video
    视频组件 <video src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" controls></video>
    可用属性如下
        src 视频网址
        initial-time="100" 设置初始播放位置,单位秒
        duration 设置视频时长,单位秒
        controls 是否显示默认播放控件
        enable-danmu 是否开启弹幕
        danmu-btn 是否开启控制弹幕的按钮
        danmu-list 设置弹幕列表信息,写法如下
            [
                {
                    text: \'第 1s 出现的弹幕\',
                    color: \'#ff0000\',
                    time: 1
                },
                {
                    text: \'第 3s 出现的弹幕\',
                    color: \'#ff00ff\',
                    time: 3
                }
            ]
        autoplay 是否自动播放
        loop 是否循环播放
        muted 是否静音播放
        page-gesture 是否在非全屏模式下开启亮度和音量调节
        direction 设置视频全屏的方向,0 代表竖向,90 代表横向
        bindplay 播放时触发的事件
        bindpause 暂停时触发的事件
        bindended 视频播放完成触发的事件
        bindtimeupdate 播放进度变化时触发事件
        bindfullscreenchange 视频切换全屏时触发
        objectFit 视频自适应的规则 contain:包含,fill:填充,cover:覆盖
        poster 视频的封面图片
    
    • camera
    照相机组件 <camera device-position=\'back\' falsh="off" style="width: 100%; height: 300px;"></camera>
    可用属性如下
        device-position 使用前置还是后置摄像头 front back
        flash 闪光灯设置 auto, on, off
        bindstop 摄像头意外关闭触发
        binderror 用户禁止摄像头触发
    
  6. 地图组件
    • map
    地图控件 <map longitude="113.324520" latitude="23.099994"  show-location style="width: 100%; height: 300px;"></map>
    相关属性如下
        longitude 设置经度
        latitude 设置纬度
        scale 初始缩放级别 5~18 默认是16
        include-points 当前实体要包含的点,数组
        show-location 定位点是否带方向
        bindmarkertap 标记点被点击触发
        bindcallouttap 点击标记点提示框触发
        bindcontroltap 点击自定义控件触发
        bindregionchange 地图移动触发
        bindtap 点击地图触发
        bindupdated 地图loaded触发
        controls 地图固定自定义控件,写法如下
            [{
                id: \'map\', 
                position: { 控件的位置
                    left: 0,
                    top: 300 - 50,
                    width: 50,
                    height: 50
                },
                iconPath: \'/images/t1.jpg\', 控件的图片
                clickable: true 是否可点击
            }]
        markers 地图标记点,写法如下
            [{
                id: 0, // 标记点id
                latitude: 23.099994, // 标记点坐标
                longitude: 113.324520,
                title: \'测试\', // 标记点的标题
                iconPath: \'...\', // 标记点图片
                rotate: 90, // 标记点旋转角度
                alpha: 0.5, // 标记点透明度
                width: 50, // 标记点宽度
                height: 50, // 标记点高度
                callout: ... // 自定义标记点提示框
                    传递对象,可选属性如下
                    content 显示的文本
                    color 文本的颜色
                    fontSize 文本字体大小
                    borderRadius 边框圆角
                    bgColor 背景颜色
                    padding: \'30\' 文本周围空隙
                    textAlign 文本对齐方式
                    display 设置提示框的显示形式 \'BYCLICK\' 点击后显示,\'ALWAYS\': 一直显示
                label: ... 设置标记点下方说明
                    传递对象,可用属性如下
                    content 文本
                    color 字体颜色
                    fontSize 字体大小
                    x 设置点偏移量
                    y
                    borderWidth 边框宽度
                    borderColor 边框颜色
                    borderRadius 边框圆角
                    bgColor 背景颜色
                    padding 文本周围空隙
                    textAlign 文本对齐方式
            }]
        polyline 画线,写法如下
            [{
                points: [{ 设置坐标点
                    longitude: 113.3245211,
                    latitude: 23.10229
                }],
                color: "#FF0000DD", 设置线的颜色
                width: 线的宽度
                dottedLine 是否虚线
                arrowLine 是否有箭头
                arrowIconPath 箭头图片路径
                borderColor 边框颜色
                borderWidth 边框宽度
            }]
        circles 画圆,写法如下
            [{
                longitude: 113.3245211, 圆中心坐标
                latitude: 23.10229,
                color: "#FF0000DD", 圆边框的颜色 
                fillColor: "#000000AA", 圆填充颜色
                radius: 100, 圆半径
                strokeWidth: 5 圆边框宽度
            }]
    

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序组件通信发布时间:2022-07-18
下一篇:
一种轻量级的微信小程序日志监控的方法发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap