微信小程序学习之路(二) ------ 组件_indicator-dots 设置false 没生效-优快云博客

组件

视图容器

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