項目4JavaScript基礎(chǔ)入門任務(wù)1按下按鈕改變view的背景色

【任務(wù)描述】（1）設(shè)置一個view，樣式名為box,背景色為非白色，大小適當，居中顯示于屏幕上方。（3）組件上下之間有一定的間隔。按下按鈕改變view的背景色，如圖4-1-1所示。（2）添加2個button，按下按鈕，實現(xiàn)改變view背景色為指定顏色。（4）標題設(shè)置為“背景變色”。圖4-1-1改變view的背景色【操作步驟】1．打開index.wxml文件，添加view和butoon組件。<view

style="background:{{MyColor}};"

class="box">

請注意顏色變化</view><button

type="default"

bindtap="toRed">變紅色</button><button

type="default"

bindtap="toYellow">變黃色</button>【操作步驟】2．打開index.wxss文件,添加.box、button樣式。.box{

margin:0

auto;

width:500rpx;

height:300rpx;

line-height:

300rpx;

text-align:

center;

border:

10px

solid

#0f1;}button{

margin-top:20rpx;}【操作步驟】3．打開index.js文件，定義變量MyColor，并實現(xiàn)toRed、toYellow事件功能。Page({

data:{

MyColor:'green'

},

toRed(){

this.setData({

MyColor:'red'

})

},

toYellow(){

this.setData({

MyColor:'yellow'

})

},

})任務(wù)2改變字號【任務(wù)描述】編程實現(xiàn)改變字號的功能，如圖4-2-1所示。（1）執(zhí)行“字號增大”框內(nèi)文本的字號變大。（2）執(zhí)行“字號變小”框內(nèi)文本的字號變小。圖4-2-1改變字號【操作步驟】【操作步驟】1.打開index.wxml，添加<viewclass="box">、<buttontype="default"bindtap="toBig">、<buttontype="default"bindtap="toSmall">等組件。<view

class="box"

style="font-size:{{size}}%;">

小程序案例設(shè)計</view><button

type="default"

bindtap="toBig">字號增大</button><button

type="default"

bindtap="toSmall">字號變小</button>【操作步驟】2.打開index.wxss，添加.box、button等樣式。.box{

margin:0

auto;

width:90%;

height:300rpx;

line-height:

300rpx;

text-align:

center;

border:

5px

solid

#0f1;}button{

margin-top:20rpx;}【操作步驟】3.打開index.js，添加變量size,添加toBig()函數(shù)實現(xiàn)增大size的功能，添加toSmall()函數(shù)實現(xiàn)減小size的功能。Page({

data:{

size:50

},

toBig(){

this.size=this.data.size;

this.size=this.size+10;

console.log(this.size);

this.setData({

size:this.size

})

},【操作步驟】

toSmall(){

this.size=this.data.size;

this.size=this.size-10;

this.setData({

size:this.size

})

},

})任務(wù)3正方形變圓【任務(wù)描述】編程實現(xiàn)正方形變圓的功能，如圖4-3-1、圖4-3-2所示。（1）執(zhí)行“變圓？”框的四角向圓角變化。（2）多次執(zhí)行“變圓？”框會變成圓。圖4-3-1正方形任務(wù)3正方形變圓圖4-3-2正方形變圓【操作步驟】【操作步驟】1.打開index.wxml，添加<viewclass="box">、<buttontype="default"bindtap="tobecircle">等組件。<view

class="box"

style="border-radius:{{ra}}%">

方圓</view><button

type="default"

bindtap="tobecircle">變圓？</button>【操作步驟】2.打開index.wxss，添加.box、button等樣式。.box{

margin:0

auto;

width:500rpx;

height:500rpx;

line-height:

500rpx;

text-align:

center;

border:

5px

solid

#0f1;}button{

margin-top:20rpx;}【操作步驟】3.打開index.js，添加變量ra,添加tobecircle()函數(shù)實現(xiàn)增大ra的功能。Page({

data:{

ra:0

},

tobecircle(){

this.ra=this.data.ra;

this.ra=this.ra+3;

this.setData({

ra:this.ra

})

},})任務(wù)4左右移【任務(wù)描述】編程實現(xiàn)左右移的功能，如圖4-4-1所示。（1）執(zhí)行“右移”，框內(nèi)的圓向右移動。（2）執(zhí)行“左移”，框內(nèi)的圓向左移動。圖4-4-1左右移”【操作步驟】【操作步驟】1.打開index.wxml，添加<viewclass="box">、<viewclass="cirle"style="left:{{vLeft}}%">、<buttontype="default"bindtap="toRight">、<buttontype="default"bindtap="toLeft">等組件。<view

class="box">

<view

class="cirle"

style="left:{{vLeft}}%">

圓

</view>

<button

type="default"

bindtap="toRight">右移</button>

<button

type="default"

bindtap="toLeft">左移</button></view>【操作步驟】2.打開index.wxss，添加.box、.cirle、button等樣式。.box{

margin:0

auto;

height:900rpx;

width:90%;

border:

2px

solid

rgb(5,255,88);}【操作步驟】.cirle{

position:relative;

top:200rpx;

width:50rpx;

height:50rpx;

line-height:

50rpx;

text-align:

center;

border:

5px

solid

#0f1;

border-radius:

50%;}button{

margin-top:20rpx;

position:relative;

top:500rpx;}【操作步驟】3.打開index.js，添加變量vLeft,添加toRight()函數(shù)實現(xiàn)增大vLeft的功能,添加toLeft()函數(shù)實現(xiàn)減小vLeft的功能。Page({

data:{

vLeft:45

},

toRight(){

this.vLeft=this.data.vLeft;

this.vLeft=this.vLeft+3;

this.setData({

vLeft:this.vLeft

})

},【操作步驟】

toLeft(){

this.vLeft=this.data.vLeft;

this.vLeft=this.vLeft-3;

this.setData({

vLeft:this.vLeft

})

},

})任務(wù)5數(shù)量增大減少【任務(wù)描述】編程實現(xiàn)左右數(shù)字增加減少的功能，如圖4-5-1所示。（1）執(zhí)行“+”，框內(nèi)的數(shù)字增加1。（2）執(zhí)行“-”，框內(nèi)的數(shù)字減少1。圖4-5-1數(shù)字增加減少【操作步驟】1.打開index.wxml，添加<viewclass="box">、<buttontype="default"bindtap="toPlus">、<buttontype="default"bindtap="toMinus">等組件。<view

class="box">

{{vData}}</view><button

type="default"

bindtap="toPlus">+</button><button

type="default"

bindtap="toMinus">-</button>【操作步驟】2.打開index.wxss，添加.box、button等樣式。.box{

margin:0

auto;

height:300rpx;

line-height:300rpx;

font-size:200rpx;

text-align:center;

border:

2px

solid

rgb(5,255,88);}button{

margin-top:20rpx;

font-size:100rpx;

}【操作步驟】3.打開index.js，添加變量vData,添加toPlus()函數(shù)實現(xiàn)vData增加1的功能,添加toMinus()函數(shù)實現(xiàn)vData減小1的功能。Page({

data:{

vData:45

},

toPlus(){

this.vData=this.data.vData;

this.vData++;

this.setData({

vData:this.vData

})

},【操作步驟】

toMinus(){

this.vData=this.data.vData;

this.vData--;

this.setData({

vData:this.vData

})

},

})任務(wù)6長度變了編程實現(xiàn)長寬變化的功能，如圖4-6-1所示。（1）執(zhí)行“長”，框的寬度變大。（2）執(zhí)行“窄”，框的寬度變小?！救蝿?wù)描述】圖4-6-1長寬變化【操作步驟】1.打開index.wxml，添加<viewclass="box">、<buttontype="default"bindtap="toWider">、<buttontype="default"bindtap="toLess">等組件。<view

class="box"

style="width:{{vWidth}}%">

長寬變化了？</view><button

type="default"

bindtap="toWider">變長</button><button

type="default"

bindtap="toLess">變窄</button>【操作步驟】2.打開index.wxss，添加.box、button等樣式。.box{

margin:0

auto;

height:300rpx;

line-height:300rpx;

text-align:center;

border:

2px

solid

rgb(5,255,88);}button{

margin-top:20rpx;}【操作步驟】3.打開index.js，添加變量vWidth,添加toWider()函數(shù)實現(xiàn)vWidth增加10的功能,添加toLess()函數(shù)實現(xiàn)toLess()減小10的功能。Page({

data:{

vWidth:45

},

toWider(){

this.vWidth=this.data.vWidth;

this.vWidth=this.vWidth+10;

this.setData({

vWidth:this.vWidth

})

},【操作步驟】

toLess(){

this.vWidth=this.data.vWidth;

this.vWidth=this.vWidth-10;

this.setData({

vWidth:this.vWidth

})

},

})任務(wù)7石頭剪刀布【任務(wù)描述】編程實現(xiàn)石頭剪刀布的功能，如圖4-7-1所示。（1）執(zhí)行“石頭”，只顯示“石頭”圖片。（2）執(zhí)行“剪刀”，只顯示“剪刀”圖片。（3）執(zhí)行“布”，只顯示“布”圖片。圖4-7-1石頭剪刀布【操作步驟】1.打開index.wxml，添加<viewclass="box"style="width:100%">、<buttontype="default"bindtap="toS">、<buttontype="default"bindtap="toJ">、<buttontype="default"bindtap="toB">等組件。<view

class="box"

style="width:100%"><image

src="../../images/{{t}}.png"></image></view><button

type="default"

bindtap="toS">石頭</button><button

type="default"

bindtap="toJ">剪刀</button><button

type="default"

bindtap="toB">布</button>【操作步驟】2.打開index.wxss，添加.box、image、button等樣式。.box{

margin:0

auto;

height:500rpx;

line-height:300rpx;

text-align:center;

border:

2px

solid

rgb(5,255,88);}【操作步驟】image{

width:300rpx;

height:300rpx;

margin-top:100rpx;}button{

margin-top:20rpx;}【操作步驟】3.打開index.js，添加變量t,添加toS()函數(shù)實現(xiàn)t賦值為"s"的功能，添加toB()函數(shù)實現(xiàn)t賦值為"b"的功能，添加toJ()函數(shù)實現(xiàn)t賦值為"j"的功能。Page({

data:{

t:"b"

},

toS(){

this.setData({

t:"s"

})

},【操作步驟】

toB(){

this.setData({

t:"b"

})

},

toJ(){

this.setData({

t:"j"

})

},

})任務(wù)8wx:if實現(xiàn)開燈關(guān)燈效果【任務(wù)描述】編程實現(xiàn)開燈關(guān)燈的功能，如圖4-8-1、圖4-8-2所示。（1）執(zhí)行“開燈”，顯示開了燈的圖片，開燈后，按鈕上的文本顯示“關(guān)燈”。（2）執(zhí)行“關(guān)燈”，顯示關(guān)了燈的圖片，關(guān)燈后，按鈕上的文本顯示“開燈”。圖4-8-1開燈任務(wù)8wx:if實現(xiàn)開燈關(guān)燈效果圖4-8-2關(guān)燈【操作步驟】1.打開index.wxml，添加<viewclass="box">、<imagesrc="../images/lighton.png"wx:if="{{t}}"></image>、<imagesrc="../images/lightoff.png"wx:else></image>、<buttontype="default"bindtap="toONOFF">等組件。<view

class="box">

<image

src="../images/lighton.png"

wx:if="{{t}}"></image>

<image

src="../images/lightoff.png"

wx:else></image></view><button

type="default"

bindtap="toONOFF">{{info}}</button>【操作步驟】2.打開index.wxss，添加.box、image、button等樣式。.box{

margin:0

auto;

height:500rpx;

line-height:300rpx;

text-align:center;

border:

2px

solid

rgb(5,255,88);}【操作步驟】image{

width:300rpx;

height:300rpx;

margin-top:100rpx;}button{

margin-top:20rpx;}【操作步驟】3.打開index.js，添加變量t,添加toONOFF()函數(shù)實現(xiàn)t取反的功能。Page({

data:{

t:true,

info:"關(guān)燈"

},

toONOFF(){

this.t=this.data.t;

this.info=this.;

this.t=!this.t;

if(this.t)

this.info="關(guān)燈";

else

this.info="開燈";

this.setData({

t:this.t,

info:this.info

})

},})【操作步驟】任務(wù)9控制漸變色【任務(wù)描述】編程實現(xiàn)控制漸變色的功能，如圖4-9-1所示。（1）執(zhí)行“向左”，漸變色的方向左。（2）執(zhí)行“向右”，漸變色的方向右。（3）執(zhí)行“向左下”，漸變色的方向左下。（4）執(zhí)行“向右下”，漸變色的方向右下。圖4-9-1控制漸變色【操作步驟】1.打開index.js，添加變量dir,添加toLeft()函數(shù)實現(xiàn)dir賦值為"left"的功能,添加toRight()函數(shù)實現(xiàn)dir賦值為"right"的功能,添加toLeftdown()函數(shù)實現(xiàn)dir賦值為"bottomleft"的功能,添加toRightdown()函數(shù)實現(xiàn)dir賦值為"bottomright"的功能。Page({

data:{

dir:"right"

},

toLeft(){

this.setData({

dir:"left"

})

},【操作步驟】

toRight(){

this.setData({

dir:"right"

})

},

toLeftdown(){

this.setData({

dir:"bottomleft"

})

},

toRightdown(){

this.setData({

dir:"bottomright"

})

},

})【操作步驟】2.打開index.wxml，添加<buttonbindtap="toLeft">、<buttonbindtap="toRight">、<buttonbindtap="toLeftdown">、<buttonbindtap="toRightdown">、<viewclass="box">等組件。<button

bindtap="toLeft">向左</button><button

bindtap="toRight">向右</button><button

bindtap="toLeftdown">向左下</button><button

bindtap="toRightdown">向右下</button><view

class="box"

style="background-image:linear-gradient(to{{dir}},green,yellow);"></view>【操作步驟】3.打開index.wxss，添加.box、button等樣式。.box{

height:500rpx;

width:100%;}button{

display:

inline;

margin-left:10rpx;}任務(wù)10日期的顯示【任務(wù)描述】編程實現(xiàn)顯示系統(tǒng)日期的功能，如圖4-10-1所示。（1）執(zhí)行“今天”，顯示系統(tǒng)的當前日期。（2）執(zhí)行“明天”，顯示系統(tǒng)的當前日期的明天日期。（3）執(zhí)行“昨天”，顯示系統(tǒng)的當前日期的昨天日期，（4）日期以中文“年月日”格式顯示?！静僮鞑襟E】1.打開index.wxml，添加<buttonbindtap="today">、<text>{{today}}</text>、<buttonbindtap="nextDate">、<text>{{today1}}</text>、<buttonbindtap="preDate">、<text>{{today_1}}</text>等組件。<view>

<button

bindtap="today">今天</button>

<text

>{{today}}</text></view>【操作步驟】<view>

<button

bindtap="nextDate">明天</button>

<text

>{{today1}}</text></view><view>

<button

bindtap="preDate">昨天</button>

<text

>{{today_1}}</text></view>【操作步驟】2.打開index.wxss，添加button等樣式。button{

display:

inline;

margin-left:10rpx;}【操作步驟】3.打開index.js，添加變量today、today1、today_1,添加today()函數(shù)實現(xiàn)獲取當前日期的功能,添加nextDate()函數(shù)實現(xiàn)獲取當前日期下一天的功能,添加preDate()函數(shù)實現(xiàn)獲取當前日期前一天的功能。Page({

data:{

today:"",

today1:"",

today_1:"",

},【操作步驟】

today(){

var

nextDate=new

Date();

var

Y

=nextDate.getFullYear();//月

var

M

=(nextDate.getMonth()+1

<10

?'0'

+(nextDate.getMonth()+1):nextDate.getMonth()+1);//月

var

D

=nextDate.getDate()<10

?'0'

+nextDate.getDate():nextDate.getDate();//日

this.setData({

today:Y

+"年"

+M

+"月"

+D

+"日",

})

},【操作步驟】

nextDate(){

var

curDate=new

Date();

var

nextDate=new

Date(curDate.getTime()+24

*60

*60

*1000);//后一天

var

Y

=nextDate.getFullYear();//月

var

M

=(nextDate.getMonth()+1

<10

?'0'

+(nextDate.getMonth()+1):nextDate.getMonth()+1);//月

var

D

=nextDate.getDate()<10

?'0'

+nextDate.getDate():nextDate.getDate();//日

this.setData({

today1:Y

+"年"

+M

+"月"

+D

+"日",

})

},【操作步驟】

preDate(){

var

curDate=new

Date();

var

preDate=new

Date(curDate.getTime()-24

*60

*60

*1000);//前一天

var

Y

=preDate.getFullYear();//月

var

M

=(preDate.getMonth()+1

<10

?'0'

+(preDate.getMonth()+1):preDate.getMonth()+1);//月

var

D

=preDate.getDate()<10

?'0'

+preDate.getDate():preDate.getDate();

//日

this.setData({

today_1:Y

+"年"

+M

+"月"

+D

+"日",

})

},

})任務(wù)11用wx:fox設(shè)計課程表用wx:fox設(shè)計一周的課程表，如圖4-11-1所示。（1）顯示一周的課程表。（2）第一行顯示星期一至星期五。（3）第一列顯示第1節(jié)至第6節(jié)。（4）其他格子顯示數(shù)組記錄的課表內(nèi)容。（5）第一行、第一列與其他格式的樣式有區(qū)別。圖4-11-1課程表【操作步驟】1.打開index.js，添加數(shù)組變量array、x1、x2、x3、x4、x5。Page({

data:{

array:["第1節(jié)","第2節(jié)","第3節(jié)","第4節(jié)","第5節(jié)","第6節(jié)"],

x1:["美工","體育","web","小程序","UI","網(wǎng)絡(luò)"],

x2:["數(shù)學(xué)","計算機","編程","物聯(lián)網(wǎng)","web","web"],

x3:["語文","數(shù)學(xué)","英語","體育","編程","編程"],

x4:["web","小程序","UI","物聯(lián)網(wǎng)","web","web"],

x5:["數(shù)學(xué)","計算機","web","小程序","UI","web"],

},})【操作步驟】2.打開index.wxml，添加<viewclass="row">、<viewclass="dt1th">、<viewclass="dt

th">、<viewwx:for="{{array}}">等組件。<view

class="row">

<view

class="dt1th"></view>

<view

class="dt

th">

星期一

</view>

<view

class="dt

th">

星期二

</view>

<view

class="dt

th">

星期三

</view>

<view

class="dt

th">

星期四

</view>

<view

class="dt

th">

星期五

</view>

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

wx:for="{{array}}">

<view

class="row">

<view

class="dt1">{{item}}</view>

<view

class="dt">

{{x1[index]}}

</view>

<view

class="dt">

{{x2[index]}}

</view>

<view

class="dt">

{{x3[index]}}

</view>

<view

class="dt">

{{x4[index]}}

</view>

<view

class="dt">

{{x5[index]}}

</view>

</view></view>【操作步驟】3.打開index.wxss，添加page、.dt1、.dt、.row、.th等樣式。page{

font-size:40rpx;}.dt1{

width:130rpx;

height:120rpx;

line-height:

120rpx;

margin-top:5rpx;

background-color:

rgb(8,121,187);}【操作步驟】.dt{

width:130rpx;

height:120rpx;

line-height:

120rpx;

margin-top:5rpx;

background-color:

rgb(121,218,224);

margin-left:5rpx;}【操作步驟】.row{

display:flex;}.th{

text-align:

center;

background-color:

rgb(81,121,187);

height:80rpx;

line-height:80rpx;}任務(wù)12增刪圖片【任務(wù)描述】編程實現(xiàn)添加減少圖片的功能，如圖4-12-1所示。（1）執(zhí)行“加一張”，顯示多一張圖片。（2）執(zhí)行“減一張”，顯示圖片減一張。（3）圖片與信息一起顯示。圖4-12-1添加減少圖片【操作步驟】1.打開index.js，添加數(shù)組變量num,添加getone函數(shù)實現(xiàn)添加數(shù)組num一個元素的功能,,添加moveone函數(shù)實現(xiàn)刪除一個數(shù)組num元素的功能。Page({

data:{

num:[],

},

moveone:function

(options){

this.num=this.data.num;

this.num.pop(this.data.num.length);

this.setData({

num:this.num,

})

},

getone:function

(options){

this.num=this.data.num;

this.num.push(this.data.num.length);

this.setData({

num:this.num,

})

},})【操作步驟】2.打開index.wxml，添加<buttonbindtap="getone">、<buttonbindtap="moveone">、<viewwx:for="{{num}}"class="box">、<imagesrc="../../images/w1.png"class="ima">等組件。<button

bindtap="getone">加一張</button><button

bindtap="moveone">減一張</button><view

wx:for="{{num}}"

class="box">第{{index+1}}張

<image

src="../../images/w1.png"

class="ima"></image></view>【操作步驟】3.打開index.wxss，添加.ima樣式。.ima{

width:100rpx;

height:100rpx;}任務(wù)13if語句應(yīng)用于全選【任務(wù)描述】給出兩項選擇，可全選或全不選，也可以單擊某一項更改單項的選擇狀態(tài)，如圖4-13-1所示。（1）運用icon組件，實現(xiàn)兩個選項的顯示，并為選擇設(shè)置適當?shù)臉邮剑哼吙颉⑦吘?、底色或字體大小等。（2）初始時一項處于被選狀態(tài)，另一項處于不被選中狀態(tài)。（3）提供兩個按鈕，實現(xiàn)全選和全不選的功能。（4）編程實現(xiàn)單擊任一項時，能切換選擇狀態(tài)。圖4-13-1可全選或全不選【操作步驟】【操作步驟】1．打開index.wxml文件，添加<viewstyle="margin-top:50rpx;">、<textclass='Item'>、<viewclass="itembox">、<viewclass="itemsub"bindtap="SelectA">、<icontype="{{ItemAstate}}"size="20"/>、<viewclass="itemsub"bindtap="SelectB">、<icontype="{{ItemBstate}}"size="20"/>等組件。<view

style="margin-top:50rpx;">

<text

class='Item'>1.{{ItemTitle}}</text>

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

class="itembox">

<view

class="itemsub"

bindtap="SelectA">

<icon

type="{{ItemAstate}}"

size="20"/>{{ItemA}}

</view>

<view

class="itemsub"

bindtap="SelectB">

<icon

type="{{ItemBstate}}"

size="20"/>{{ItemB}}

</view></view><button

bindtap="SelectAll">全選</button><button

bindtap="SelectClear">沒有</button>【操作步驟】2．打開index.wxss文件，添加.Item、.itemsub、icon、button等樣式。.Item{width:95%;height:50rpx;}.itemsub{

line-height:

50rpx;

margin-top:10rpx;

margin-left:5%;

border:

1rpx

solid

#999;

width:90%;}【操作步驟】icon{

height:50rpx;

margin-top:

10rpx;

margin-left:10rpx;}button{

margin-top:20rpx;

width:50%;}【操作步驟】3.打開index.js，添加ItemTitle、ItemA、ItemB、ItemAstate、ItemBstate等變量,添加SelectAll:function()函數(shù)實現(xiàn)給ItemAstate、ItemBstate變量賦值為'success';添加SelectClear:function()函數(shù)實現(xiàn)給ItemAstate、ItemBstate變量賦值為'clear';添加SelectA:function()函數(shù)實現(xiàn)第一個選項取反;添加SelectB:function()函數(shù)實現(xiàn)第二個選項取反。Page({

data:{

ItemTitle:"以下課程您學(xué)過的有哪些？",

ItemA:"A.JS程序設(shè)計",

ItemB:"B.C++程序設(shè)計",

ItemAstate:'success',

ItemBstate:'clear',

},【操作步驟】

SelectAll:function(){

this.setData({

ItemAstate:'success',

ItemBstate:'success',

})

},

SelectClear:function

(){

this.setData({

ItemAstate:'clear',

ItemBstate:'clear',

})

},

【操作步驟】

SelectA:function(){

this.Sate=this.data.ItemAstate;

if

(this.Sate=="success"){

this.Sate="clear";

}else{

this.Sate

="success";

}

this.setData({

ItemAstate:this.Sate

})

},【操作步驟】

SelectB:function

(){

this.Sate

=this.data.ItemBstate;

if

(this.Sate

=="success"){

this.Sate

="clear";

}else

{

this.Sate

="success";

}

this.setData({

ItemBstate:this.Sate

})

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

onReady:function

(){

wx.setNavigationBarTitle({

title:'橫向滾動'

})

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

onReady:function

(){

wx.setNavigationBarTitle({

title:'縱向滾動'

})

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

totop:function

(){

wx.showToast({

title:'到頂了',

icon:'succes',

duration:1000,

mask:true

})

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

tobottom:function

(){

wx.showToast({

title:'到底了',

icon:'succes',

duration:1000,

mask:true

})

},任務(wù)3滑塊容器【任務(wù)描述】使用滑塊容器實現(xiàn)3張圖片輪播功能，如圖5-3-1所示。（1）設(shè)置3張輪播圖,圖片寬度100%。（2）是否自動播放可以更改。（3）是否有指示點可以更改?！眻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>指示點</view><view>

<switch

checked="{{indicatorDots}}"

bindchange="changeIndicatorDots"

/></view><view>自動播放</view><view>

<switch

checked="{{autoplay}}"

bindchange="changeAutoplay"

/></view>【操作步驟】2.打開js文件，添加indicatorDots、autoplay等變量,添加changeIndicatorDots()實現(xiàn)indicatorDots變量值取反的功能、添加changeAutoplay()函數(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進度條【任務(wù)描述】編程改變進度條的屬性值，如圖5-4-1所示。（1）添加一個進度條，自定義設(shè)置進度條背景色和前景色，進度條當前值為50%。（2）添加“進度增加”按鈕，每執(zhí)行一次，進度值增加5。（3）添加“進度減少”按鈕，每執(zhí)行一次，進度值減少5。（4）添加“信息顯示狀態(tài)”按鈕，每執(zhí)行一次，切換信息顯示狀態(tài)。圖5-4-1進度條【操作步驟】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">進度增加</button><button

bindtap="minus">進度減少</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實現(xiàn)percent增加的功能、添加minus實現(xiàn)percent減少的功能、添加setinfo實現(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可移動區(qū)域編程實現(xiàn)一個可移動小圓的功能，如圖5-5-1、圖5-5-2所示。（1）有一個允許移動的區(qū)域。（2）區(qū)域內(nèi)的圓可移動，也可被禁止移動。（3）執(zhí)行“開關(guān)”時，改變是否可以移動的狀態(tài)。（4）當前狀態(tài)允許移動時，圓形顯示為綠色；當前狀態(tài)禁止移動時，圓形顯示為黃色?！救蝿?wù)描述】【任務(wù)描述】圖5-5-2小圓禁止動圖5-5-1小圓允許動【操作步驟】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">進度增加</button><button

bindtap="minus">進度減少</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實現(xiàn)percent增加的功能、添加minus實現(xiàn)percent減少的功能、添加setinfo實現(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拖拽驗證【任務(wù)描述】編程實現(xiàn)一個拖拽驗證的功能，如圖5-6-1所示。（1）可拖拽圖片位于背景圖內(nèi)。（2）把左側(cè)的小方塊拖拽到右側(cè)的小方塊內(nèi)，則提示成功驗證。（3）限制可拖拽小方塊只能左右拖拽。圖5-6-1拖拽驗證【操作步驟】圖5-6-2驗證成功【操作步驟】1.打開wxml文件，添加<view

style="text-align:center;">、<movabl