開始了解下小程序的組件。源碼：https://github.com/limingios/wxProgram.git 中的No.10

公司主營業(yè)務(wù)：成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、移動(dòng)網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競(jìng)爭(zhēng)能力。創(chuàng)新互聯(lián)公司是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)公司推出金臺(tái)免費(fèi)做網(wǎng)站回饋大家。

組件

• 多個(gè)組件構(gòu)成一張視圖頁面
  >經(jīng)過樣式和布局，頁面其實(shí)理解成html

• 組件包含<開始標(biāo)簽>

• 每個(gè)組件都包含一些公用屬性

• 官方的闡述

  https://developers.weixin.qq.com/miniprogram/dev/component/

view視圖組件

• view 組件
  >用的最多的，也是之前的樣例也講過。https://developers.weixin.qq.com/miniprogram/dev/component/view.html

• 演示用例

.container{
??background-color:?red;
}

.hover-class{
??background-color:?gray;
}

scroll-view 視圖組件

• 官網(wǎng)的介紹
  >https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html

• 演示

??a
??b
??c
??d
??e




??a
??b
??c
??d
??e

//scroll-view.js
//獲取應(yīng)用實(shí)例

Page({
??scrolltoupper:function(){
??????console.log("滾動(dòng)到頂部");
??},
??scrolltolower:function(){
??????console.log("滾動(dòng)到底部");
??},
??scroll:function(){
????console.log("滾動(dòng)中。。。");
??}

})

.container-wrap{
??display:?flex;
??flex-wrap:wrap;
}

.container-nowrap{
??display:flex;
??white-space:?nowrap;
}

.sizeY{
??width:?100%;
??height:?150rpx;
}

.sizeX{
??width:?250rpx;
??height:?150px;
??display:?inline-block;
}
.a?{
??background:?red;
}
.b?{
??background:?yellow;
}

.c?{
??background:?blue;
}

.d?{
??background:?green;
}

.e?{
??background:?gold;
}

注意：enable-back-to-top=”true” 在開發(fā)工具沒辦法演示只能在手機(jī)上才能演示出來點(diǎn)擊直接到達(dá)頂部的效果。關(guān)于scrollview 只有橫向和縱向，其實(shí)這塊還是比較重要的多加練習(xí)吧。

swiper組件

• 俗稱 輪播圖

• 官方介紹
  >https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

• 演示

??
????
??????
????
??

?indicator-dots?
?autoplay?
?interval
?duration

//swiper.js
//獲取應(yīng)用實(shí)例

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:?5000,
????duration:?1000
??},
??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
????})
??}
})

• 演示

??
??

.container{
??background-color:?red;
??width:?100%;
??height:?650rpx;
}

.size{
??background-color:?yellow;
??width:?300rpx;
??height:?250rpx;
}

//movable.js
//獲取應(yīng)用實(shí)例

Page({
??onchange:function(){
????console.log("在移動(dòng)。。");
??},
??onscale:function(){
????console.log("在縮放")
??}
})

PS：跟老鐵一起過了一遍wx小程序關(guān)于視圖的api，感覺還是組件很豐富，很好用！