項(xiàng)目5組件入門任務(wù)1實(shí)現(xiàn)橫向滾動(dòng)功能【任務(wù)描述】實(shí)現(xiàn)橫向滾動(dòng)功能，如圖5-1-1、圖5-1-2所示。（1）設(shè)置當(dāng)前頁面背景色，顏色自選。（2）設(shè)置當(dāng)前頁面標(biāo)題為“橫向滾動(dòng)”。（3）滾動(dòng)區(qū)域?qū)挾葹轫撁娴?0%。（4）滾動(dòng)項(xiàng)目為五個(gè)view在滾動(dòng)區(qū)域內(nèi)可以橫向滾動(dòng)。（5）滾動(dòng)區(qū)域與滾動(dòng)項(xiàng)目的樣式自行定義。圖5-1-2滾動(dòng)到最右的效果圖5-1-1滾動(dòng)到最左的效果【操作步驟】【操作步驟】1.打開index.wxss，添加page樣式，給當(dāng)前頁面設(shè)置一種背景色。page{

background-color:

rgb(39,240,39);}2.打開index.wxml，添加<scroll-view

scroll-x="true">、<view

class='item'>等組件。<scroll-view

scroll-x="true">

<view

class='item'>1</view>

<view

class='item'>2</view>

<view

class='item'>3</view>

<view

class='item'>4</view>

<view

class='item'>5</view></scroll-view>【操作步驟】3.打開index.wxss，添加scroll-view、.item等樣式實(shí)現(xiàn)界面效果，如圖所示。scroll-view{

background-color:

red;

height:200rpx;

white-space:nowrap;

width:80%;

margin:10rpx

auto;

padding:20rpx;}【操作步驟】.item{

display:

inline-block;

background-color:

yellow;

width:200rpx;

height:150rpx;

margin-left:20rpx;

margin-top:20rpx;}【操作步驟】4.打開index.js，在onReady函數(shù)中，使用wx.setNavigationBarTitle設(shè)置當(dāng)前頁標(biāo)題。

onReady:function

(){

wx.setNavigationBarTitle({

title:'橫向滾動(dòng)'

})

},任務(wù)2實(shí)現(xiàn)縱向滾動(dòng)功能【任務(wù)描述】實(shí)現(xiàn)縱向滾動(dòng)功能，如圖5-2-1、圖5-2-2所示。（1）設(shè)置當(dāng)前頁面標(biāo)題為“縱向滾動(dòng)”。（2）滾動(dòng)項(xiàng)目為五張課程圖片，在滾動(dòng)區(qū)域內(nèi)可以縱向滾動(dòng)。（3）滾動(dòng)到最上一張圖片時(shí)，提示“到頂了”。（4）滾動(dòng)到最下一張圖片時(shí)，提示“到底了”。圖5-2-1滾動(dòng)到頂?shù)男Ч蝿?wù)2實(shí)現(xiàn)縱向滾動(dòng)功能圖5-2-2滾動(dòng)到底的效果【操作步驟】1.打開index.wxml，添加<scroll-view

scroll-y="true">、<view

class='itemsize'>等組件。<scroll-view

scroll-y="true"

style='height:500rpx;'bindscrolltoupper="totop"

bindscrolltolower="tobottom"scroll-top="0">

<view

class='itemsize'>

<image

src="../../images/sc1.png"></image>

</view>

<view

class='itemsize'>

<image

src="../../images/sc2.png"></image>

</view>【操作步驟】

<view

class='itemsize'>

<image

src="../../images/sc3.png"></image>

</view>

<view

class='itemsize'>

<image

src="../../images/sc4.png"></image>

</view>

<view

class='itemsize'>

<image

src="../../images/sc5.png"></image>

</view></scroll-view>【操作步驟】2.打開index.wxss，添加.itemsize、image等樣式。.itemsize{

width:

100%;

height:

250rpx;

margin-top:10rpx;}image{

width:100%;

height:100%;}【操作步驟】

3.打開index.js，在onReady函數(shù)中，使用wx.setNavigationBarTitle設(shè)置當(dāng)前頁標(biāo)題。

onReady:function

(){

wx.setNavigationBarTitle({

title:'縱向滾動(dòng)'

})

},【操作步驟】4.打開index.js，添加totop函數(shù)，滾動(dòng)到最上一張圖片時(shí)，提示“到頂了”。

totop:function

(){

wx.showToast({

title:'到頂了',

icon:'succes',

duration:1000,

mask:true

})

},【操作步驟】5.打開index.js，添加tobottom函數(shù)，滾動(dòng)到最下一張圖片時(shí)，提示“到底了”。

tobottom:function

(){

wx.showToast({

title:'到底了',

icon:'succes',

duration:1000,

mask:true

})

},任務(wù)3滑塊容器【任務(wù)描述】使用滑塊容器實(shí)現(xiàn)3張圖片輪播功能，如圖5-3-1所示。（1）設(shè)置3張輪播圖,圖片寬度100%。（2）是否自動(dòng)播放可以更改。（3）是否有指示點(diǎn)可以更改?！眻D5-3-1圖片輪播【操作步驟】1.打開wxml文件，添加<swiper>組件，并添加三張輪播圖。<view>

<swiper

indicator-dots="{{indicatorDots}}"

autoplay="{{autoplay}}"

interval="{{interval}}"

duration="{{duration}}">

<swiper-item>

<image

src="../../images/wpic1.png"></image>

</swiper-item>

<swiper-item>

<image

src="../../images/wpic2.png"></image>

</swiper-item>

<swiper-item>

<image

src="../../images/wpic3.png"></image>

</swiper-item>

</swiper></view>【操作步驟】<view>指示點(diǎn)</view><view>

<switch

checked="{{indicatorDots}}"

bindchange="changeIndicatorDots"

/></view><view>自動(dòng)播放</view><view>

<switch

checked="{{autoplay}}"

bindchange="changeAutoplay"

/></view>【操作步驟】2.打開js文件，添加indicatorDots、autoplay等變量,添加changeIndicatorDots()實(shí)現(xiàn)indicatorDots變量值取反的功能、添加changeAutoplay()函數(shù)實(shí)現(xiàn)autoplay變量值取反的功能。Page({

data:{

indicatorDots:true,

autoplay:true,

interval:2000,

duration:500

},【操作步驟】

changeIndicatorDots(){

this.setData({

indicatorDots:!this.data.indicatorDots

})

},

changeAutoplay(){

this.setData({

autoplay:!this.data.autoplay

})

},})任務(wù)4進(jìn)度條【任務(wù)描述】編程改變進(jìn)度條的屬性值，如圖5-4-1所示。（1）添加一個(gè)進(jìn)度條，自定義設(shè)置進(jìn)度條背景色和前景色，進(jìn)度條當(dāng)前值為50%。（2）添加“進(jìn)度增加”按鈕，每執(zhí)行一次，進(jìn)度值增加5。（3）添加“進(jìn)度減少”按鈕，每執(zhí)行一次，進(jìn)度值減少5。（4）添加“信息顯示狀態(tài)”按鈕，每執(zhí)行一次，切換信息顯示狀態(tài)。圖5-4-1進(jìn)度條【操作步驟】1.打開wxml文件，添加<progress>、<button>組件。<progress

class="progress"

percent="{{percent}}"

show-info="{{info}}"

stroke-width="{{sw}}"

activeColor="{{acolor}}"

backgroundColor="{{bcolor}}"

active="{{isActive}}"

active-mode="forwards"></progress><button

bindtap="plus">進(jìn)度增加</button><button

bindtap="minus">進(jìn)度減少</button><button

bindtap="setinfo">信息顯示狀態(tài)</button>【操作步驟】2.打開wxss文件，添加.progress、button等樣式。.progress

{

width:

90%;

margin:

20rpx

auto;}button{

margin-top:20rpx;

background-color:

rgb(243,208,95);}【操作步驟】3.打開js文件，添加percent、sw、acolor、bcolor、isActive、info等變量,添加plus實(shí)現(xiàn)percent增加的功能、添加minus實(shí)現(xiàn)percent減少的功能、添加setinfo實(shí)現(xiàn)infow值的取反的功能。Page({

data:{

percent:50,

sw:30,

acolor:'#00ff00',

bcolor:'#cccccc',

isActive:true,

info:true,

},【操作步驟】

plus:function(){

this.percent=this.data.percent;

this.percent=this.percent+5;

this.setData({

percent:this.percent

})

},

minus:function(){

this.percent=this.data.percent;

this.percent=this.percent-5;

this.setData({

percent:this.percent

})

},

setinfo:function(){

this.info=this.;

this.setData({

info:!this.info

})

},

})任務(wù)5可移動(dòng)區(qū)域編程實(shí)現(xiàn)一個(gè)可移動(dòng)小圓的功能，如圖5-5-1、圖5-5-2所示。（1）有一個(gè)允許移動(dòng)的區(qū)域。（2）區(qū)域內(nèi)的圓可移動(dòng)，也可被禁止移動(dòng)。（3）執(zhí)行“開關(guān)”時(shí)，改變是否可以移動(dòng)的狀態(tài)。（4）當(dāng)前狀態(tài)允許移動(dòng)時(shí)，圓形顯示為綠色；當(dāng)前狀態(tài)禁止移動(dòng)時(shí)，圓形顯示為黃色。【任務(wù)描述】【任務(wù)描述】圖5-5-2小圓禁止動(dòng)圖5-5-1小圓允許動(dòng)【操作步驟】1.打開wxml文件，添加<progress>、<button>組件。<progress

class="progress"

percent="{{percent}}"

show-info="{{info}}"

stroke-width="{{sw}}"

activeColor="{{acolor}}"

backgroundColor="{{bcolor}}"

active="{{isActive}}"

active-mode="forwards"></progress><button

bindtap="plus">進(jìn)度增加</button><button

bindtap="minus">進(jìn)度減少</button><button

bindtap="setinfo">信息顯示狀態(tài)</button>【操作步驟】2.打開wxss文件，添加.progress、button等樣式。.progress

{

width:

90%;

margin:

20rpx

auto;}button{

margin-top:20rpx;

background-color:

rgb(243,208,95);}【操作步驟】3.打開js文件，添加percent、sw、acolor、bcolor、isActive、info等變量,添加plus實(shí)現(xiàn)percent增加的功能、添加minus實(shí)現(xiàn)percent減少的功能、添加setinfo實(shí)現(xiàn)infow值的取反的功能。Page({

data:{

percent:50,

sw:30,

acolor:'#00ff00',

bcolor:'#cccccc',

isActive:true,

info:true,

},

plus:function(){

this.percent=this.data.percent;

this.percent=this.percent+5;

this.setData({

percent:this.percent

})

},【操作步驟】

minus:function(){

this.percent=this.data.percent;

this.percent=this.percent-5;

this.setData({

percent:this.percent

})

},

setinfo:function(){

this.info=this.;

this.setData({

info:!this.info

})

},

})任務(wù)6拖拽驗(yàn)證【任務(wù)描述】編程實(shí)現(xiàn)一個(gè)拖拽驗(yàn)證的功能，如圖5-6-1所示。（1）可拖拽圖片位于背景圖內(nèi)。（2）把左側(cè)的小方塊拖拽到右側(cè)的小方塊內(nèi)，則提示成功驗(yàn)證。（3）限制可拖拽小方塊只能左右拖拽。圖5-6-1拖拽驗(yàn)證【操作步驟】圖5-6-2驗(yàn)證成功【操作步驟】1.打開wxml文件，添加<view

style="text-align:center;">、<movable-area>、<movable-view>、<button>等組件，“開關(guān)”按鈕使用bindtap="onoff"綁定事件。<view

style="text-align:center;">當(dāng)狀狀態(tài)：{{tit}}</view><movable-area>

<movable-view

direction="all"

disabled="{{t}}"

style="

background-color:{{color}};">

</movable-view>

</movable-area><button

bindtap="onoff">開關(guān)</button>

【操作步驟】2.打開wxss文件，添加movable-area、movable-view、button等樣式。movable-area{

height:450rpx;

width:90%;

border:

10rpx

solid

rgb(0,0,0);

margin:

10rpx

auto;}movable-view{

height:

150rpx;

width:

150rpx;

border-radius:

50%;}button{

background-color:

rgb(233,180,5);}【操作步驟】3.打開js文件，添加color、tit、t等變量,添加onoff實(shí)現(xiàn)狀態(tài)的變化、圓形顏色變化以及的提示文本的變化等功能。Page({

data:{

color:"rgb(255,255,0)",

tit:"禁止動(dòng)",

t:true

},【操作步驟】

onoff:function

(e){

this.tit=this.data.tit;

this.t=!this.data.t;

if(this.t){

this.tit="禁止動(dòng)";

this.color="rgb(255,255,0)";

}else{

this.tit="允許動(dòng)";

this.color="rgb(91,236,78)";

}

this.setData({

t:this.t,

tit:this.tit,

color:this.color

});

}})任務(wù)7checkbox實(shí)現(xiàn)項(xiàng)目多選

【任務(wù)描述】圖5-7-1調(diào)查表

應(yīng)用checkbox編程實(shí)現(xiàn)一個(gè)可全選也可多選的調(diào)查表功能，如圖5-7-1所示。（1）使用數(shù)組定義變量記錄需要顯示的數(shù)據(jù)。（2）使用checkbox和wx:fox顯示選項(xiàng)，每項(xiàng)包括序號(hào)、多選按鈕、景點(diǎn)名稱。（3）每項(xiàng)樣式有背景色，項(xiàng)目間留間隔。（4）執(zhí)行“取消”，所有項(xiàng)目不被選中;執(zhí)行“全選”，所有項(xiàng)目選中。（5）選項(xiàng)狀態(tài)發(fā)生變化時(shí)，實(shí)時(shí)統(tǒng)計(jì)選中項(xiàng)目的個(gè)數(shù)。（6）添加適當(dāng)?shù)臉?biāo)題，標(biāo)題欄設(shè)計(jì)適當(dāng)?shù)臉邮??！静僮鞑襟E】1.打開wxml文件，添加<viewclass="tit">、<movable-area>、<movable-view>等組件,并在<movable-view>組件內(nèi)使用bindchange="onChange"綁定事件。

<view

class="tit">拖拽驗(yàn)證：</view>

請(qǐng)把白色方塊移動(dòng)右側(cè)對(duì)應(yīng)的位置

<movable-area

style="height:450rpx;width:100%;">

<image

src="../../images/moveback.png"

class="backpic"></image>

<image

src="../../images/moveblock2.png"

class="block2"></image>

<movable-view

style="height:450rpx;width:50rpx;z-index:9999;"

direction="horizontal"

bindchange="onChange">

<image

src="../../images/moveblock.png"

class="block"></image>

</movable-view>

</movable-area>【操作步驟】2.打開wxss文件，添加.block、.block2等樣式。.block{

position:

absolute;

z-index:

999;

top:100rpx;

left:10rpx;

width:150rpx;

height:150rpx;}.block2{

position:

absolute;

z-index:

99;

top:100rpx;

left:500rpx;

width:150rpx;

height:150rpx;}【操作步驟】3.打開js文件，添加onChange函數(shù)，并實(shí)現(xiàn)驗(yàn)證成功的提示功能，如圖5-6-2所示。Page({

onChange:function

(e){

//console.log(e.detail.x);//成功后請(qǐng)注釋

if(e.detail.x==209){

wx.showToast({

title:'恭喜，驗(yàn)證成功',

icon:'succes',

duration:1000,

mask:true

})

}

},})任務(wù)8學(xué)歷選擇器

【任務(wù)描述】應(yīng)用picker編程實(shí)現(xiàn)一個(gè)學(xué)歷選擇器功能，如圖5-8-1所示。（1）學(xué)歷可選范圍包括小學(xué)以下、初中、高中、大專、大學(xué)以上，啟動(dòng)時(shí)有默認(rèn)值。（2）畢業(yè)日期可選年月日，允許有可選擇的范圍，啟動(dòng)時(shí)有默認(rèn)值。（3）選擇信息發(fā)生更改后，當(dāng)前信息相應(yīng)發(fā)生變改。（4）樣式設(shè)計(jì)合理，支持創(chuàng)意設(shè)計(jì)。圖5-8-1學(xué)歷選擇器【操作步驟】1.打開wxml文件，添加<viewclass="section">、<picker>等組件。<view

class="section">

<view

class="section__title">選擇學(xué)歷</view>

<picker

bindchange="bindPickerChange"

value="{{index}}"

range="{{array}}">

<view

class="picker">

<text

class="tip">請(qǐng)選擇：</text><text

class="selected">{{array[index]}}</text>

</view>

</picker></view>【操作步驟】<view

class="section">

<view

class="section__title">畢業(yè)日期</view>

<picker

mode="date"

value="{{date}}"

start="2000-01-01"

end="2020-09-01"

bindchange="bindDateChange">

<view

class="picker">

<text

class="tip">請(qǐng)選擇：</text><text

class="selected">{{date}}</text>

</view>

</picker></view>【操作步驟】<view

class="infoall">

<view

class="title">當(dāng)前信息</view>學(xué)歷：

<view

class="info">{{array[index]}}</view>畢業(yè)日期：

<view

class="info">{{date}}</view></view>【操作步驟】2.打開wxss文件，添加.section、.picker、.selected、.infoall、.title、.title等樣式。.section{

height:200rpx;

background-color:

rgb(239,243,239);

border-bottom:1rpx

solid

rgb(168,166,166);

margin-top:10rpx;}.picker{

height:100rpx;

line-height:100rpx;

margin-left:100rpx;

margin-right:100rpx;

background-color:

rgb(237,243,243);}【操作步驟】.selected{

display:inline-block;

width:300rpx;

height:60rpx;

line-height:60rpx;

text-align:center;

background-color:

rgb(240,235,175);

border-top:1rpx

solid

rgb(102,100,100);

border-bottom:1rpx

solid

rgb(102,100,100);}.infoall{

height:400rpx;

background-color:

rgb(221,235,221);

border-bottom:1rpx

solid

rgb(168,166,166);

margin-top:10rpx;

}【操作步驟】.title{

text-align:center;

height:80rpx;

line-height:80rpx;

border-bottom:1rpx

solid

red;}.info{

height:100rpx;

line-height:100rpx;

margin-left:100rpx;

margin-right:100rpx;}【操作步驟】3.打開js文件，添加array、index、date等變量,添加bindPickerChange()函數(shù)實(shí)現(xiàn)學(xué)歷選擇后的數(shù)據(jù)更新、添加bindDateChange()函數(shù)實(shí)現(xiàn)畢業(yè)日期選擇后的數(shù)據(jù)更新。Page({

data:{

array:['小學(xué)以下','初中','高中','大專','大學(xué)以上'],

index:0,

date:'2007-09-01',

},

bindPickerChange:function

(e){

this.setData({

index:e.detail.value

})

},

bindDateChange:function

(e){

this.setData({

date:e.detail.value

})

},})任務(wù)9省市區(qū)選擇器

【任務(wù)描述】編程實(shí)現(xiàn)一個(gè)省市區(qū)選擇器功能，如圖5-9-1所示。（1）可選省市區(qū)，啟動(dòng)時(shí)有默認(rèn)值。（2）標(biāo)題和選擇設(shè)置合適的樣式。（3）選擇后，彈出提示框提示當(dāng)前選擇的區(qū)。圖5-9-1省市區(qū)選擇器【操作步驟】1.打開wxml文件，添加<viewclass="section">、<view

class="section__title">、<view

class="picker">等組件。<view

class="section">

<view

class="section__title">省市區(qū)選擇器</view>

<picker

mode="region"

bindchange="bindRegionChange"

value="{{region}}">

<view

class="picker">

當(dāng)前選擇：

<view

class="area">{{region[0]}}</view>

<view

class="area">{{region[1]}}</view>

<view

class="area">{{region[2]}}</view>

</view>

</picker></view>【操作步驟】2.打開wxss文件，添加.section__title、.area等樣式。.section__title{

text-align:

center;

background-color:

rgb(207,188,188);

height:70rpx;

line-height:70rpx;}.area{

height:80rpx;

line-height:

80rpx;

width:50%;

text-align:

center;

border-bottom:1rpx

solid

rgb(207,188,188);

border-top:1rpx

solid

rgb(207,188,188);

margin-top:10rpx;

margin-left:200rpx;}【操作步驟】3.打開js文件，添加region等變量,添加bindRegionChange()函數(shù)實(shí)現(xiàn)數(shù)據(jù)更新及信息提示功能。Page({

data:{

region:['廣東省','廣州市','海珠區(qū)'],

},

bindRegionChange:function

(e){

this.setData({

region:e.detail.value

});

wx.showToast({

title:e.detail.value[2],

icon:'success',

duration:2000

})

}})任務(wù)9省市區(qū)選擇器

【任務(wù)描述】

編程實(shí)現(xiàn)一個(gè)省市區(qū)選擇器功能，如圖5-9-1所示。（1）可選省市區(qū)，啟動(dòng)時(shí)有默認(rèn)值。（2）標(biāo)題和選擇設(shè)置合適的樣式。（3）選擇后，彈出提示框提示當(dāng)前選擇的區(qū)。圖5-9-1省市區(qū)選擇器【操作步驟】1.打開wxml文件，添加<viewclass="section">、<view

class="section__title">、<view

class="picker">等組件。<view

class="section">

<view

class="section__title">省市區(qū)選擇器</view>

<picker

mode="region"

bindchange="bindRegionChange"

value="{{region}}">

<view

class="picker">

當(dāng)前選擇：

<view

class="area">{{region[0]}}</view>

<view

class="area">{{region[1]}}</view>

<view

class="area">{{region[2]}}</view>

</view>

</picker></view>【操作步驟】2.打開wxss文件，添加.section__title、.area等樣式。.section__title{

text-align:

center;

background-color:

rgb(207,188,188);

height:70rpx;

line-height:70rpx;}圖5-9-1省市區(qū)選擇器【操作步驟】.area{

height:80rpx;

line-height:

80rpx;

width:50%;

text-align:

center;

border-bottom:1rpx

solid

rgb(207,188,188);

border-top:1rpx

solid

rgb(207,188,188);

margin-top:10rpx;

margin-left:200rpx;}圖5-9-1省市區(qū)選擇器【操作步驟】3.打開js文件，添加region等變量,添加bindRegionChange()函數(shù)實(shí)現(xiàn)數(shù)據(jù)更新及信息提示功能。Page({

data:{

region:['廣東省','廣州市','海珠區(qū)'],

},

bindRegionChange:function

(e){

this.setData({

region:e.detail.value

});

wx.showToast({

title:e.detail.value[2],

icon:'success',

duration:2000

})

}})圖5-9-1省市區(qū)選擇器任務(wù)10滑動(dòng)選擇器

【任務(wù)描述】

使用滑動(dòng)選擇器編程實(shí)現(xiàn)一個(gè)拖拽驗(yàn)證的功能，如圖5-10-1所示