微信小程序学习之路(二) ------ 组件

组件API视图容器小程序基础组件小程序表单组件小程序导航组件小程序媒体组件

EricEco8

1503人浏览 · 2017-06-17 11:07:11

EricEco8 · 2017-06-17 11:07:11 发布

组件

视图容器

view

hover-class , 指定按下去的样式类，不指定hover-class没有点击特效
hover-start-time, 按住后多久出现点击态(默认50ms)
hovar-stay-time, 松开后点击态保留多久(默认400ms)

    // logs.wxml
    <view class="section">
    <view class="section__title">flex-direction: row</view>
    <view class="flex-wrp" style="flex-direction:row;">
        <view class="flex-item bc_green">1</view>
        <view class="flex-item bc_red" hover-class="bc_yellow">2</view>
        <view class="flex-item bc_blue">3</view>
    </view>
    </view>
    <view class="section">
    <view class="section__title">flex-direction: column</view>
    <view class="flex-wrp" style="height: 300px;flex-direction:column;">
        <view class="flex-item bc_green" hover-class="bc_orange">1</view>
        <view class="flex-item bc_red">2</view>
        <view class="flex-item bc_blue">3</view>
    </view>
    </view>

    // logs.wxss
    .flex-wrp{
        display: flex;
    }
    .flex-item{
        flex: 1;
        width: 100rpx;
        height: 100rpx;
    }
    .bc_green{
        background-color: green;
    }
    .bc_red{
        background-color: red;
    }
    .bc_blue{
        background-color: blue;
    }
    .bc_orange{
        background-color: orange;
    }
    .bc_yellow{
        background-color: yellow;
    }

    // 如果需要滚动视图。需要使用 scroll-view

scroll-view：滚动视图
- scroll-x — 允许横向滚动(默认false)
- scroll-y — 允许纵向滚动(默认false)
- upper-threshold(number) — 距顶部/左边多远时（单位px），触发 scrolltoupper 事件
- lower-threshold(number) — 距底部/右边多远时（单位px），触发 scrolltolower 事件
- scroll-top(number) — 设置竖向滚动条位置
- scroll-left(number) — 设置横向滚动条位置
- scroll-into-view(目标元素的id) — 滚动到目标元素
- scroll-with-animation(false) — 设置滚动条位置时使用动画过度
- enable-back-to-top(false) — ios点击顶部，安卓双击顶部标题返回顶部
- bindscrolltoupper(event) — 滚动到左边/顶部会触发 scrolltoupper 事件
- bindscrolltolower(event) — 滚动到左边/顶部会触发 scrolltolower 事件
- bindscroll(event) — 滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}
  使用竖向滚动时，需要给一个固定高度，通过 WXSS 设置 height。
  注意：
  1. 请勿在 scroll-view 中使用 textarea、map、canvas、video 组件
  2. scroll-into-view 的优先级高于 scroll-top
  3. 在滚动 scroll-view 时会阻止页面回弹，所以在 scroll-view 中滚动，是无法触发 onPullDownRefresh
  4. 若要使用下拉刷新，请使用页面的滚动，而不是 scroll-view ，这样也能通过点击顶部状态栏回到页面顶部

swiper：滑块视图容器，swiper中只可放置swiper-item组件，swiper-item只可放置在swiper中

indicator-dots(false) — 是否显示面板指示点
indicator-color(rgba(0,0,0,.3)) — 面板指示点颜色
indicator-active-color(#000000) — 当前选中的指示点颜色
autoplay(false) — 是否自动切换
current(0) — 当前所在页面的index
interval(5000) — 自动切换间隔
duration(500) — 滑动动画时长
circular(false) — 是否采用衔接滑动
bindchange(event) — current 改变时会触发 change 事件，event.detail = {current: current}

    // item.wxml
    <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
        <block wx:for="{{imgUrls}}">
            <swiper-item>
            <image src="{{item}}" class="slide-image" width="355" height="150" />
            </swiper-item>
        </block>
    </swiper>
    <button bindtap="changeIndicatorDots"> indicator-dots </button>
    <button bindtap="changeAutoplay"> autoplay </button>
    <slider bindchange="intervalChange" show-value min="500" max="2000" /> interval
    <slider bindchange="durationChange" show-value min="1000" max="10000" /> duration

    // item.js
    Page({
        data: {
            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'
            ],
            indicatorDots: false,
            autoplay: false,
            interval: 500,
            duration: 100
        },
        changeIndicatorDots: function (e) {
            this.setData({
                indicatorDots: !this.data.indicatorDots
            })
        },
        changeAutoplay: function (e) {
            this.setData({
                autoplay: !this.data.autoplay
            })
        },
        intervalChange: function (e) {
            this.setData({
                interval: e.detail.value
            })
        },
        durationChange: function (e) {
            this.setData({
                duration: e.detail.value
            })
        }
    })

movable-area: movable-view 的可移动区域

注意：movable-area 必须设置width和height属性，不设置默认为10px
movable-view: 可移动的视图容器，在页面中可以拖拽滑动
direction(none) — movable-view的移动方向，属性值有all、vertical、horizontal、none
inertia(false) — movable-view 是否带有惯性
out-of-bounds(false) — 超过可移动区域后，movable-view是否还可以移动
x(number) — 定义x轴方向的偏移，如果x的值不在可移动范围内，会自动移动到可移动范围；改变x的值会触发动画
y(number) — 定义y轴方向的偏移，如果y的值不在可移动范围内，会自动移动到可移动范围；改变y的值会触发动画
damping(20) — 阻尼系数，用于控制x或y改变时的动画和过界回弹的动画，值越大移动越快
friction(2) — 摩擦系数，用于控制惯性滑动的动画，值越大摩擦力越大，滑动越快停止；必须大于0，否则会被设置成默认值
注意：movable-view必须在组件中，并且必须是直接子节点，否则不能移动。
示例：

    // item.wxml
    <view class="section">
        <view class="section__title">movable-view区域小于movable-area</view>
        <movable-area style="height: 200px;width: 200px;background: red;">
            <movable-view style="height: 50px; width: 50px; background: blue;" x="{{x}}" y="{{y}}"></movable-view>
        </movable-area>
        <view class="btn-area">
            <button size="mini" bindtap="tap">click me to move to (30px, 30px)</button>
        </view>
        <view class="section__title">movable-view区域大于movable-area</view>
        <movable-area style="height: 100px;width: 100px;background: red;">
            <movable-view style="height: 200px; width: 200px; background: blue;"></movable-view>
        </movable-area>
    </view>

    // item.js
    Page({
        data: {
            x: 0,
            y: 0
        },
        tap: function (e) {
            this.setData({
            x: 30,
            y: 30
            });
        }
    })

基础内容

icon: 图标

type(string) — icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear
size(23) — icon的大小，单位： px
color(color) — icon 的颜色，同css的color

    // item.wxml
    <view class="group">
        <block wx:for="{{iconSize}}">
            <icon type="success" size="{{item}}"/>
        </block>
    </view>

    <view class="group">
        <block wx:for="{{iconType}}">
            <icon type="{{item}}" size="40"/>
        </block>
    </view>


    <view class="group">
        <block wx:for="{{iconColor}}">
            <icon type="success" size="40" color="{{item}}"/>
        </block>
    </view>

    // item.js  
    Page({
        data: {
            iconSize: [20, 30, 40, 50, 60, 70],
            iconColor: [
            'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'
            ],
            iconType: [
            'success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear'
            ]
        }
    })

text: 文本
- selectable(false) — 文本是否可选
- 组件内只支持嵌套。
- 支持转义字符 “\” , 除了文本节点以外的其他节点都无法长按选中。
progress：进度条
- percent(float) — 百分比0-100
- show-info(false) — 在进度条右侧显示百分比
- stroke-width(6) — 进度条线宽
- color(#09BB07) — 进度条颜色
- activeColor(color) — 已选择的进度条颜色
- backgroundColor(color) — 未选择的进度条颜色
- active(false) — 进度条从左往右的动画
```
    <progress percent="20" show-info />
    <progress percent="40" stroke-width="12" />
    <progress percent="60" color="pink" />
    <progress percent="80" active />
```

表单组件

buton

size(default) — 按钮的大小(mini、default)
type(default) — 按钮的样式类型(primary、warn、default)
plain(false) — 按钮是否镂空，背景色透明
disabled(false) — 按钮是否禁用
loading(false) — 名称前是否带loading图标
form-type(string) — 用于组件，点击分别会触发 submit/reset 事件(取值为submit、reset)
open-type(string) — 微信开放能力(取值为contact(客服)、share(触发用户转发))
hover-class(button-hover) — 当hover-class=”none”时没有点击效果注：button-hover 默认为{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}
hover-start-time(20) — 按住后多久出现点击态，单位毫秒
hover-stay-time(70) — 手指松开后点击态保留时间，单位毫秒

    // item.wxml
    <button type="default" size="{{defaultSize}}" loading="{{loading}}" plain="{{plain}}"
    disabled="{{disabled}}" bindtap="default" hover-class="other-button-hover"> default </button>
    <button type="primary" size="{{primarySize}}" loading="{{loading}}" plain="{{plain}}"
            disabled="{{disabled}}" bindtap="primary"> primary </button>
    <button type="warn" size="{{warnSize}}" loading="{{loading}}" plain="{{plain}}"
            disabled="{{disabled}}" bindtap="warn"> warn </button>
    <button bindtap="setDisabled">点击设置以上按钮disabled属性</button>
    <button bindtap="setPlain">点击设置以上按钮plain属性</button>
    <button bindtap="setLoading">点击设置以上按钮loading属性</button>
    <button open-type="contact">进入客服会话</button>

    // item.wxss 
    /** 修改button默认的点击态样式类**/
    .button-hover {
    background-color: red;
    }
    /** 添加自定义button点击态样式类**/
    .other-button-hover {
    background-color: blue;
    }

    // item.js  
    var types = ['default', 'primary', 'warn']
    var pageObject = {
        data: {
            defaultSize: 'default',
            primarySize: 'default',
            warnSize: 'default',
            disabled: false,
            plain: false,
            loading: false
        },
        setDisabled: function (e) {
            this.setData({
            disabled: !this.data.disabled
            })
        },
        setPlain: function (e) {
            this.setData({
            plain: !this.data.plain
            })
        },
        setLoading: function (e) {
            this.setData({
            loading: !this.data.loading
            })
        }
    }

    for (var i = 0; i < types.length; ++i) {
        (function (type) {
            pageObject[type] = function (e) {
            var key = type + 'Size'
            var changedData = {}
            changedData[key] =
                this.data[key] === 'default' ? 'mini' : 'default'
            this.setData(changedData)
            }
        })(types[i])
    }

    Page(pageObject)

checkbox
- checkbox-group：多项选择器，内部由多个checkbox组成。包含属性：bindchange(event) — 中选中项发生改变是触发 change 事件，detail = {value:[选中的checkbox的value的数组]}
- value(string) — 标识，选中时触发的 change 事件，并携带的 value
- disabled(false) — 是否禁用
- checked(false) — 设置默认是否选中
- color(color) — checkbox的颜色，同css3

form

将组件内的用户输入的提交。
当点击表单中 formType 为 submit 的组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。
report-submit(boolean) — 是否返回formID用于发送模板消息(详见模板消息API)
bindsubmit(event) — 携带 form 中的数据触发 submit 事件，event.detail = {value : {‘name’: ‘value’} , formId: ”}
bindreset(event) — 表单重置时会触发 reset 事件

    // item.wxml
    <form bindsubmit="formSubmit" bindreset="formReset">
        <view class="section section_gap">
            <view class="section__title">switch</view>
            <switch name="switch" />
        </view>
        <view class="section section_gap">
            <view class="section__title">slider</view>
            <slider name="slider" show-value></slider>
        </view>
        <view class="section">
            <view class="section__title">input</view>
            <input name="input" placeholder="please input here" />
        </view>
        <view class="section section_gap">
            <view class="section__title">radio</view>
            <radio-group name="radio-group">
            <label>
                <radio value="radio1" />radio1</label>
            <label>
                <radio value="radio2" />radio2</label>
            </radio-group>
        </view>
        <view class="section section_gap">
            <view class="section__title">checkbox</view>
            <checkbox-group name="checkbox">
            <label>
                <checkbox value="checkbox1" />checkbox1</label>
            <label>
                <checkbox value="checkbox2" />checkbox2</label>
            </checkbox-group>
        </view>
        <view class="btn-area">
            <button formType="submit">Submit</button>
            <button formType="reset">Reset</button>
        </view>
    </form>

    // item.js
    Page({
        formSubmit: function (e) {
            console.log('form发生了submit事件，携带数据为：', e.detail.value)
        },
        formReset: function () {
            console.log('form发生了reset事件')
        }
    })

input
- value
- type — 可选(‘text’、’number’、’idvard’：身份证输入键盘、’dight’：带小数点的数字键盘)
- password(false) — 是否是密码类型
- placehoider
- placeholder-style(string) — 指定 placeholder 的样式
- placeholder-class(“input-placeholder” ) — 指定 placeholder 的样式类
- disabled
- maxlength(140) — 最大输入长度，设置为 -1 的时候不限制最大长度
- cursor-spacing(0) — 指定光标与键盘的距离，单位 px 。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离
- focus(false) — 自动聚焦，获取焦点
- confirm-type(‘done’) — 设置键盘右下角按钮的文字(‘send’、’sreach’、’next’、’go’:前往、’done’)
- confirm-hold(false) — 单击键盘右下按钮时，是否保持键盘不收起
- bindinput(event) — 当键盘输入时，触发input事件，event.detail = {value: value}，处理函数可以直接 return 一个字符串，将替换输入框的内容。
- bindfocus(event) — 输入框聚焦时触发，event.detail = {value: value}
- bindblur(event) — 输入框失去焦点时触发，event.detail = {value: value}
- bindconfirm(event) — 点击完成按钮时触发，event.detail = {value: value}
label
- 用来改进表单组件的可用性，使用for属性找到对应的id，或者将控件放在该标签下，当点击时，就会触发对应的控件。for优先级高于内部控件，内部有多个控件的时候默认触发第一个控件。
- 目前可以绑定的控件有：, , , 。
- for属性绑定控件id

picker：从底部弹起的滚动选择器，现支持三种选择器，通过mode来区分，分别是普通选择器，时间选择器，日期选择器，默认是普通选择器。

普通选择器：mode = selector
range([]) — mode为 selector 时，range 有效,值为Array / Object Array
range-key(string) — 当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容
value(0) — number型 — value 的值表示表示选择了 range 中的第几个（下标从 0 开始）。
bindchange(event) — value 改变时触发 change 事件，event.detail = {value: value}
disabled
时间选择器：mode = time
value(string) — 选中的时间，格式为：”hh:mm”
start(string) — 表示有效时间范围的开始，字符串格式为”hh:mm”
end(string) — 表示有效时间范围的结束，字符串格式为”hh:mm”
bindchange(event) — value 改变时触发 change 事件，event.detail = {value: value}
disabled
日期选择器：mode = date
value(0) — 表示选中的日期，格式为”YYYY-MM-DD”
start(string) — 表示有效日期范围的开始，字符串格式为”YYYY-MM-DD”
end(string) — 表示有效日期范围的结束，字符串格式为”YYYY-MM-DD”
fields(day) — 有效值 year,month,day，表示选择器的粒度
bindchange(event) — value 改变时触发 change 事件，event.detail = {value: value}
disabled

    // item.wxml
    <view class="section">
    <view class="section__title">地区选择器</view>
        <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
            <view class="picker">
            当前选择：{{array[index]}}
            </view>
        </picker>
    </view>
    <view class="section">
        <view class="section__title">时间选择器</view>
        <picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">
            <view class="picker">
            当前选择: {{time}}
            </view>
        </picker>
    </view>

    <view class="section">
        <view class="section__title">日期选择器</view>
        <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
            <view class="picker">
            当前选择: {{date}}
            </view>
        </picker>
    </view>

    // item.js  
    Page({
        data: {
            array: ['美国', '中国', '巴西', '日本'],
            objectArray: [
            {
                id: 0,
                name: '美国'
            },
            {
                id: 1,
                name: '中国'
            },
            {
                id: 2,
                name: '巴西'
            },
            {
                id: 3,
                name: '日本'
            }
            ],
            index: 0,
            date: '2016-09-01',
            time: '12:01'
        },
        bindPickerChange: function(e) {
            console.log('picker发送选择改变，携带值为', e.detail.value)
            this.setData({
            index: e.detail.value
            })
        },
        bindDateChange: function(e) {
            this.setData({
            date: e.detail.value
            })
        },
        bindTimeChange: function(e) {
            this.setData({
            time: e.detail.value
            })
        }
    })

picker-view: 嵌入页面的滚动选择器

value(numberArray) — 数组中的数字依次表示 picker-view 内的 picker-view-colume 选择的第几项（下标从 0 开始），数字大于 picker-view-column 可选项长度时，选择最后一项。
indicator-style(string) — 设置选择器中间选中框的样式
indicator-class(string) — 设置选择器中间选中框的类名
bindchange(event) — 当滚动选择，value 改变时触发 change 事件，event.detail = {value: value}；value为数组，表示 picker-view 内的 picker-view-column 当前选择的是第几项（下标从 0 开始）
注意：其中只可放置组件，其他节点不会显示。 picker-view-column组件仅可放置于中，其孩子节点的高度会自动设置成与picker-view的选中框的高度一致

    // item.wxml   
    <view>
        <view>{{year}}年{{month}}月{{day}}日</view>
        <picker-view indicator-style="height: 50px;" style="width: 100%; height: 300px;" value="{{value}}" bindchange="bindChange">
            <picker-view-column>
                <view wx:for="{{years}}" style="line-height: 50px">{{item}}年</view>
            </picker-view-column>
            <picker-view-column>
                <view wx:for="{{months}}" style="line-height: 50px">{{item}}月</view>
            </picker-view-column>
            <picker-view-column>
                <view wx:for="{{days}}" style="line-height: 50px">{{item}}日</view>
            </picker-view-column>
        </picker-view>
    </view>

    // item.js  
    const date = new Date()
        const years = []
        const months = []
        const days = []

        for (let i = 1990; i <= date.getFullYear(); i++) {
        years.push(i)
        }

        for (let i = 1 ; i <= 12; i++) {
        months.push(i)
        }

        for (let i = 1 ; i <= 31; i++) {
        days.push(i)
        }

        Page({
        data: {
            years: years,
            year: date.getFullYear(),
            months: months,
            month: 2,
            days: days,
            day: 2,
            year: date.getFullYear(),
            value: [9999, 1, 1],
        },
        bindChange: function(e) {
            const val = e.detail.value
            this.setData({
            year: this.data.years[val[0]],
            month: this.data.months[val[1]],
            day: this.data.days[val[2]]
            })
        }
    })

radio： radio-group单项选择器，内部由多个组成。

bindchange(event) — 中的选中项发生变化时触发 change 事件，event.detail = {value: 选中项radio的value}
value(string) — 标识。当该选中时，的 change 事件会携带的value
checked(false)
disabled
color

    // item.wxml
    <radio-group class="radio-group" bindchange="radioChange">
        <label class="radio" wx:for="{{items}}">
            <radio value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
        </label>
    </radio-group>

    // item.js
    Page({
        data: {
            items: [
                {name: 'USA', value: '美国'},
                {name: 'CHN', value: '中国', checked: 'true'},
                {name: 'BRA', value: '巴西'},
                {name: 'JPN', value: '日本'},
                {name: 'ENG', value: '英国'},
                {name: 'TUR', value: '法国'},
            ]
        },
        radioChange: function(e) {
            console.log('radio发生change事件，携带value值为：', e.detail.value)
        }
    })

slider:滑动选择器。
- min(0) — 最小值
- max(100) — 最大值
- step(1) — 步幅，取值必须大于0且能被max-min整除
- disabled
- value(number) — 当前取值
- color — 背景颜色，推荐使用backgroundColor
- activeColor(#1aad19) — 以选择的颜色
- backgroundColor(#e9e9e9) — 背景条的颜色
- show-value(false) — 是否显示当前 value
- bindchange(event) — 完成一次拖动后触发的事件，event.detail = {value: value}
switch:开关选择器
- checked(false)
- type(switch) — 样式，有效值：switch, checkbox
- bindchange(event) — checked 改变时触发 change 事件，event.detail={ value:checked}
- color — switch 的颜色
textarea: 多行输入框
- value — 输入框的内容
- placeholder
- placeholder-style
- placeholder-class
- disabled
- maxlength(140) — 输入的最大长度，值为-1时不限制
- focus(false) — 自动获取焦点
- bindfocus(event) — 输入框聚焦时触发，event.detail = {value: value}
- bindblur(event) — 输入框失去焦点时触发，event.detail = {value: value}
- bindlinechange(event) — 输入框行数变化时调用，event.detail = {height: 0, heightRpx: 0, lineCount: 0}
- bindinput(eent) — 当键盘输入时，触发 input 事件，event.detail = {value: value}， bindinput 处理函数的返回值并不会反映到 textarea 上
- bindconfirm(event) — 点击完成时，触发 confirm 事件，event.detail = {value: value}

导航(navigator：页面链接)

+ url(string) ---   应用内的跳转链接    
+ open-type(navigate) --- 跳转方式 
    - navigate  对应 wx.navigateTo 的功能    
    - redirect  对应 wx.redirectTo 的功能    
    - switchTab 对应 wx.switchTab 的功能 
    - reLaunch  对应 wx.reLaunch 的功能  
    - navigateBack  对应 wx.navigateBack 的功能 
+ delta(number) --- 当 open-type 为 'navigateBack' 时有效，表示回退的层数    
+ hover-class(navigator-hove) --- 指定点击时的样式类，当hover-class="none"时，没有点击态效果    
+ hover-start-time(50)  
+ hover-stay-time(600)

媒体组件

audio: 音频
- id
- src
- loop(false) — 是否循环播放
- controls(true) — 是否显示默认控件
- poster(path) — 默认控件上的音频封面的图片资源地址，如果 controls 属性值为 false 则设置 poster 无效
- name(未知音频) — 默认控件上的音频名字，如果 controls 属性值为 false 则设置 name 无效
- author(未知作者) — 默认控件上的作者名字，如果 controls 属性值为 false 则设置 author 无效
- binderror(event) — 当发生错误时触发 error 事件，detail = {errMsg: MediaError.code}
- bindplay(event) — 当开始/继续播放时触发play事件
- bindpause(event) — 当暂停播放时触发 pause 事件
- bindtimeupdate(event) — 当播放进度改变时触发 timeupdate 事件，detail = {currentTime, duration}
- bindended(event) — 当播放到末尾时触发 ended 事件
image: 图片
- src
- mode(‘scaleToFill’) — 图片裁剪、缩放的模式
- binderror(event) — 当错误发生时，发布到 AppService 的事件名，事件对象event.detail = {errMsg: ‘something wrong’}
- bindload(event) — 当图片载入完毕时，发布到 AppService 的事件名，事件对象event.detail = {height:’图片高度px’, width:’图片宽度px’}
video: 视频
- src
- duration — 规定视频时长
- controls
- danmu-list — 弹幕列表
- danmu-btn(event) — 是否显示弹幕按钮，只在初始化时有效，不能动态变更
- enable-danmu(false) — 是否展示弹幕，只在初始化时有效，不能动态变更
- autoplay(false)
- bindplay(event) — 当开始/继续播放时触发play事件
- bindpause(event) — 当暂停播放时触发 pause 事件
- bindended(event) — 当播放到末尾时触发 ended 事件
- bindtimeupdate
- objectFit(contain) — 当视频大小与 video 容器大小不一致时，视频的表现形式。contain：包含，fill：填充，cover：覆盖
- poster

video标签认宽度300px、高度225px，设置宽高需要通过wxss设置width和height。

地图、画布、客服会话等下期继续。。。

CSDN学习社区

CSDN联合极客时间，共同打造面向开发者的精品内容学习社区，助力成长！

更多推荐

嵌入式作业（七）：基于Ardunio的STM32串口通信

嵌入式作业（七）0作业要求1Ardunio 完成STM32的串口通信（1）安装Ardunio IDE（2）stm32串口通信2关于 stduino IDE0作业要求安装 Ardunio IDE 和相关软件支持库，在Ardunio 完成STM32板子的串口通信程序：（1）持续向串口输出“Hello world！”；（2）当接收到“stop!”时，停止输出。网上有一个国人版的MCU集成开发平台， st

CSDN学习社区

JDBC详解

JDBC文章目录JDBC什么是JDBC?JDBC驱动程序:Java使用JDBC访问数据库的步骤:设置classpath:Oracle连接字符串的书写格式:简单的例子:常用数据库的驱动程序及JDBC URL:Oracle数据库:SQL Server数据库MySQL数据库Access数据库PreparedStatement接口:JNDI-数据源（Data Source）与连接池（Connection

CSDN学习社区

“模式识别与机器学习”学习笔记no2.再谈感知机

接**上篇：上篇主要进行了PLA，Pocket算法的理论过程分析和在给定数据集上利用pocket算法对数据集进行分类学习，得到错分数量最少的分类面。上篇中pocket算法的过程已经进行了编程和测试，框架已经建立了起来，这一篇主要上篇中没有提到或涉及不深的几个问题。1.数据集的构造。上篇是直接使用了题目给的向量，这次来根据正态分布来产生数据集。np.random.normal函数可以根据均值和方差生