百度智能小程序組件 視圖容器

view

解釋：視圖容器。

屬性說明：

示例：

<view class="single-text-area">
    <view class="view-more">
        <text>點(diǎn)擊加載更多</text>
    </view>
</view>

Bug & Tip：

1、tip: 如果需要使用滾動視圖，請使用 scroll-view；

scroll-view

解釋：可滾動視圖區(qū)域。

屬性說明：

注意：使用豎向滾動時，需要給 <scroll-view/> 一個固定高度，通過 CSS 設(shè)置 height。

示例：

<scroll-view scroll-y style="height: 300px;"
    bind:scrolltoupper="upper" bind:scrolltolower="lower" scroll-into-view="four"
    upper-threshold="10"  lower-threshold="10" scroll-top="150" bind:scroll="myscroll">
    <view id="one" class="bg-red">view1</view>
    <view id="two" class="bg-green">view2</view>
    <view id="three" class="bg-yellow">view3</view>
    <view id="four" class="bg-blue">view4</view>
</scroll-view>

.bg-red, .bg-yellow, .bg-blue, .bg-green {
    height: 150px;
    text-align: center;
}
.bg-red {
    background: #FFB6C1;
}
.bg-yellow {
    background: #FFD700;
}
.bg-blue {
    background: #87CEFA;
}
.bg-green {
    background: #98FB98;
}

Page({
    upper: e => {
        console.log('upper', e);
    },
    lower: e => {
        console.log('lower', e);
    },
    myscroll: e => {
        console.log('scroll', e);
    }
});

swiper

解釋：滑塊視圖容器。

屬性說明：

注意：其中只可放置<swiper-item/>組件，否則會導(dǎo)致未定義的行為。

swiper-item

注意：僅可放置在<swiper/>組件中，寬高自動設(shè)置為100%。

示例：

<swiper indicator-dots="true"
    autoplay="true" interval="3000" duration="500">
    <block s-for="imgUrl in imgs">
        <swiper-item>
            <image src="{{imgUrl}}" class="slide-image" width="355" height="150"/>
        </swiper-item>
    </block>
</swiper>

Page({
    data: {
        imgs: [
            "https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=955704975,2507359007&fm=173&s=32A2DC4D4E12344D4899DCB80300C013&w=218&h=146&img.JPEG",
            "https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=984374101,2617012451&fm=173&s=20A24CB176BA0D882C042D700300C092&w=218&h=146&img.JPEG",
            "https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=1663594687,1286054050&fm=173&s=EAA608C484D2006B5680719A0300E0C1&w=218&h=146&img.JPEG"
        ]
    }
})

movable-area

解釋：movable-view 的可移動區(qū)域。

注意:movable-area 必須設(shè)置width和height屬性，不設(shè)置默認(rèn)為10px。

movable-view

解釋：可移動的視圖容器，在頁面中可以拖拽滑動。

屬性說明：

Bug & Tip：

1、movable-view 必須設(shè)置 width 和 height 屬性，不設(shè)置默認(rèn)為 10px；

2、movable-view 默認(rèn)為絕對定位，top 和 left 屬性為 0px；

3、當(dāng)movable-view小于movable-area時，movable-view的移動范圍是在movable-area內(nèi)；

4、當(dāng)movable-view大于movable-area時，movable-view的移動范圍必須包含movable-area（x 軸方向和 y 軸方向分開考慮）；

注意：movable-view必須在組件中，并且必須是直接子節(jié)點(diǎn)，否則不能移動。

示例：

<view class="movable-view">
    <movable-area style="height: 300px;width: 300px;background: green;">
        <movable-view style="height: 40px; width: 40px; background: black;" x="30" y="30" direction="all">
        </movable-view>
    </movable-area>
</view>

cover-view

cover-view

解釋： 覆蓋在原生組件之上的文本視圖，可覆蓋的原生組件包括 video 、 canvas 、 camera，只支持嵌套 cover-view 、 cover-image 。

cover-image

解釋： 覆蓋在原生組件之上的圖片視圖，可覆蓋的原生組件同 cover-view ，支持嵌套在 cover-view 里。

屬性說明：

Tips：

1、cover-view 支持 overflow: scroll，但不支持動態(tài)更新 overflow。

2、最外層 cover-view 支持 position: fixed。

3、支持 css transition 動畫，transition-property 只支持 transform (translateX, translateY) 與 opacity。

4、文本建議都套上 cover-view 標(biāo)簽，避免排版錯誤。

5、只支持基本的定位、布局、文本樣式。不支持設(shè)置單邊的 border、background-image、shadow、overflow: visible 等。

6、建議子節(jié)點(diǎn)不要溢出父節(jié)點(diǎn)。

7、默認(rèn)設(shè)置的樣式有：white-space: nowrap; line-height: 1.2; display: block 。

8、建議不要頻繁改變 s-if 表達(dá)式的值控制顯隱，否則會導(dǎo)致 cover-view 顯示異常。

示例：

<video id="myVideo"
    src="https://vd3.bdstatic.com/mda-ia8e6q3g23py8qdh/hd/mda-ia8e6q3g23py8qdh.mp4?playlist=%5B%22hd%22%5D&auth_key=1521549485-0-0-d5d042ba3555b2d23909d16a82916ebc&bcevod_channel=searchbox_feed&pd=share" rel="external nofollow" 
    controls>
    <cover-view class="controls">
        <cover-image class="play"
            bindtap="play"
            src="https://smartapp.baidu.com/docs/img/logo.png" rel="external nofollow" >
        </cover-image>
        <cover-view class="pause" bindtap="pause">暫停</cover-view>
        <cover-view class="time">00:00</cover-view>
    </cover-view>
</video>

.controls {
    position: absolute;
    top: 50%;
    width: 100%;
    height: 50px;
    display: flex;
}
.play, .pause, .time {
    flex: 1;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
}
.pause, .time {
    text-align: center;
    color: white;
    line-height: 50px;
}
cover-image {
    width: 100%;
    height: 100%;
}

Page({
    onReady() {
        this.videoCtx = swan.createVideoContext('myVideo')
    },
    play() {
        this.videoCtx.play()
    },
    pause() {
        this.videoCtx.pause()
    }
})