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

成都創(chuàng)新互聯(lián)專(zhuān)注于新津縣企業(yè)網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站建設(shè)公司,商城網(wǎng)站制作。新津縣網(wǎng)站建設(shè)公司,為新津縣等地區(qū)提供建站服務(wù)。全流程按需搭建網(wǎng)站，專(zhuān)業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，成都創(chuàng)新互聯(lián)專(zhuān)業(yè)和態(tài)度為您提供的服務(wù)

組件

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

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

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

• 官方的闡述

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

view視圖組件

• view 組件
  >用的最多的，也是之前的樣例也講過(guò)。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” 在開(kāi)發(fā)工具沒(méi)辦法演示只能在手機(jī)上才能演示出來(lái)點(diǎn)擊直接到達(dá)頂部的效果。關(guān)于scrollview 只有橫向和縱向，其實(shí)這塊還是比較重要的多加練習(xí)吧。

swiper組件

• 俗稱(chēng) 輪播圖

• 官方介紹
  >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：跟老鐵一起過(guò)了一遍wx小程序關(guān)于視圖的api，感覺(jué)還是組件很豐富，很好用！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)cdcxhl.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線(xiàn)，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性?xún)r(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿(mǎn)足用戶(hù)豐富、多元化的應(yīng)用場(chǎng)景需求。