柚子快报激活码778899分享：微信小程序第四章总结

http://yzkb.51969.com/

        一.组件的定义及属性 

        组件是页面视图层（WXML）的基本组成单元，组件组合可以构建功能强大的页面结构。小程序框架为开发者提供了容器视图、基础内容、表单、导航、多媒体、地图、画布、开放能力等8类（30多个）基础组件。

        每一个组件都由一对标签组成，有开始标签和结束标签，内容放置在开始标签和结束标签之间，内容也可以是组件。组件的语法格式如下：

<标签名 属性名=“属性值”>内容...

  

     组件通过属性来进一步细化。不同的组件可以有不同的属性，但它们也有一些共用属性，如id、class、style、hidden、data-∗、bind∗/catch∗等。

       id组件的唯一表示，保持整个页面唯一，不常用。        class组件的样式类，对应WXSS中定义的样式。        style组件的内联样式，可以动态设置内联样式。        hidden组件是否显示，所有组件默认显示。       data-∗ 自定义属性，组件触发事件时，会发送给事件处理函数。事件处理函数可以通过传入参数对象的currentTarget. dataset方式来获取自定义属性的值。  bind∗/catch∗ 组件的事件，绑定逻辑层相关事件处理函数。

二.容器视图组件 

     容器视图组件是能容纳其他组件的组件，是构建小程序页面布局的基础组件，主要包括view、scroll-view和swiper组件。

（1）view

        view组件是块级组件，没有特殊功能，主要用于布局展示，相当于HTML中的div，是布局中最基本的用户界面（User Interface, UI）组件，通过设置view的CSS属性可以实现各种复杂的布局。view组件的特有属性如下表。

                      通过组件实现页面布局示例代码如下： 

//index.wxml

默认flex布局

1

2

3

上下混合布局

1

2

3

左右混合布局

1

2

3

 效果图: 

           

                                                             

 (2)scroll-view

     通过设置scroll-view组件的相关属性可以实现滚动视图的功能，其属性如下表所示。   

                                                                                                                                                                 

【注意】

(1)     在使用竖向滚动时，如果需要给scroll -view组件设置一个固定高度，可以通过WXSS设置height来完成。 (2)    请勿在scroll-view组件中使用textarea、map、canvas、video组件。 (3)    scroll-into-view属性的优先级高于scroll-top。 (4)   由于在使用scroll-view组件时会阻止页面回弹，所以在scroll-view组件滚动时无法触发onPullDownRefresh。 (5)   如果要实现页面下拉刷新，请使用页面的滚动，而不是设置scroll-view组件。这样做，能通过单击顶部状态栏回到页面顶部。 

    通过scroll-view组件可以实现下拉刷新和上拉加载更多，代码如下：

//index.wxml

bindscrolltoupper="topLoad"bindscroll="scroll">

{{item.name}}

{{item.short_description}}

加载中...

//index.js

var url="http://www.imooc.com/course/ajaxlist";

var page=0;

var page_size=5;

var sort="last";

var is_easy=0;

var lange_id=0;

var pos_id=0;

var unlearn=0;

//请求数据

var loadMore=function(that){

that.setDate({

hidden:false

});

wx.request({

url: 'url',

data:{

page:page,

page_size:page_size,

sort:sort,

is_easy:is_easy,

lange_id:lange_id,

pos_id:pos_id,

unlearn:unlearn

},

success:function(res){

var list=that.data.list;

for(var i=0;i

list.push(res.data.list[i]);

}

that.setData({

list:list

});

page++;

that.setData({

hidden:true

});

}

});

}

Page({

data:{

hidden:true,

list:[],

scrollTop:0,

scrollHeight:0

},

onLoad:function(){

//这里要注意，微信的scroll-view必须设置高度才能监听滚动事件，所以需要在页面的onLoad事件中为scroll-view的高度赋值

var that=this;

wx.getSystemInfo({

success:function(res){

that.setData({

scrollHeight:res.windowHeight

});

}

});

loadMore(that);

},

bindDownLoad:function(){

var that=this;

loadMore(that);

console.log("lower");

},

scroll:function(event){

//该方法绑定了页面滚动时的事件，这里记录了当前的position.y的值，为了在请求数据后把页面定位到这里

this.setData({

scrollTop:event.detail.scrollTop

});

},

topLoad:function(event){

//该方法绑定了页面滑动到顶部的事件，然后做页面上拉刷新

page=0;

this.setData({

list:[],

scrollTop:0

});

loadMore(this);

console.log("lower");

}

})

//index.wxss

.userinfo{

display: flex;

flex-direction: column;

align-items: center;

}

.userinfo-avatar{

width: 128rpx;

height: 128rpx;

margin: 20rpx;

border-radius: 50%;

}

.userinfo-nickname{

colro:#aaa;

}

.usermotto{

margin-top: 200px;

}

scroll-view{

width: 100%;

}

.item{

width: 90%;

height: 300rpx;

margin: 20rpxauto;

background: brown;

overflow: hidden;

}

.item.img{

width: 430rpx;

margin-right: 20rpx;

float: left;

}

.title{

font-size: 30rpx;

display: block;

margin: 30rpxauto;

}

.description{

font-size: 26rpx;

line-height: 15rpx;

}

(3)swiper

      swiper组件可以实现轮播图、图片预览、滑动页面等效果。一个完整的swiper组件由和两个标签组成，它们不能单独使用。中只能放置一个或多个，若放置其他组件则会被删除；内部可以放置任何组件，默认宽高自动设置为100%。swiper组件的属性如下表所示。

                                                                                                                                                                    组件为滑块项组件，仅可以被放置在组件中，宽高尺寸默认按100%显示。

       设置swiper组件，可以实现轮播图效果，代码如下：

效果图:

三.基础内容组件

(1)icon

       icon组件即图标组件，通常用于表示一种状态，如success、info、warn、waiting、cancel等。其属性表如下图所示。

示例代码如下：

//index.wxml

icon类型：

{{item}}

icon:大小

{{item}}

//index.js

Page({

data:{

iconType:["success","success_no_circle","info","warn","waiting","cancel","download","search","clear"],

iconSize:[10,20,30,40],

iconColor:['#f00','#0f0','#00f']

}

})

效果图:

(2)text

       text组件用于展示内容，类似HTML中的, text组件中的内容支持长按选中，支持转义字符“\”，属于行内元素。text组件的属性如下表所示：

示例代码如下：

//index.wxml

 

*

 

*

//inedx.js

Page({

data:{

x:[1,2,3,4,5],

y:[1,2,3,4,5,6,7,8,9]

}

})

效果图:

(3)progress

      progress组件用于显示进度状态，如资源加载、用户资料完成度、媒体资源播放进度等。progress组件属于块级元素，其属性如下表所示。

示例代码如下：

//index.wxml

显示百分比

改变宽度

自动显示进度条

效果图:

四.表单组件

（1）button

       button组件用来实现用户和应用之间的交互，同时按钮的颜色起引导作用。一般来说，在一个程序中一个按钮至少有3种状态：默认点击（default）、建议点击（primary）、谨慎点击（warn）。在构建项目时，应在合适的场景使用合适的按钮，当

//index.js

Page({

data:{

size:'default',

plain:'false',

loading:'false'

},

//改变按钮的大小

buttonSize:function(){

if(this.data.size=="default")

this.setData({size:'mini'})

else

this.setData({ size:'default'})

},

//是否显示镂空

buttonPlain:function(){

this.setData({palin:!this.data.plain})

},

//是否显示loading图案

buttonLoading:function(){

this.setData({loading:!this.data.loading})

}

})

效果图：

（2）radio

        单选框用来从一组选项中选取一个选项。在小程序中，单选框由（单项选择器）和（单选项目）两个组件组合而成，一个包含多个 的表示一组单选项，在同一组单选项中是互斥的，当一个按钮被选中后，之前选中的按钮就变为非选。它们的属性如下表所示。

示例代码如下：

//index.wxml

选择您喜爱的城市:

西安

北京

上海

深圳

南昌

你的选择：{{city}}

选择你喜爱的计算机语言:

{{item.name}}

你的选择:{{lang}}

//index.js

Page({

data:{

radios:[

{name:'java',value:'JAVA'},

{name:'python',value:'Python',checked:'true'},

{name:'php',value:'PHP'},

{name:'swif',value:'Swif'},

],

city:"",

lang:""

},

citychange:function(e){

this.setData({city:e.detail.value});

},

radiochange:function(event){

this.setData({lang:event.detail.value});

console.log(event.deatail.value)

}

})

效果图:

（3）checkbox

        复选框用于从一组选项中选取多个选项，小程序中复选框由 （多项选择器）和（多选项目）两个组件组合而成。一个表示一组选项，可以在一组选项中选中多个选项。它们的属性如下表所示。

 示例代码如下：

//index.wxml

选择您想去的城市

{{item.value}}

您的选择是：{{city}}

//index.js

Page({

city:"",

data:{

citys:[

{name:'km',value:'昆明'},

{name:'sy',value:'三亚'},

{name:'zh',value:'珠海',checked:'true'},

{name:'d1',value:'大连'}

]

},

cityChange:function(e){

console.log(e.detail.value);

var city =e.detail.value;

this.setData({city:city})

}

})

效果图:

（4）switch

      switch组件的作用类似开关选择器，其属性如下表所示。

示例代码如下：

//index.wxml

{{var1}}

{{var2}}

{{var3}}

//index.js

Page({

data:{

var1:'关',

var2:'开',

var3:'未选'

},

sw1:function(e){

this.setData({var1:e.detail.value?'开':'关'})

},

sw2:function(e){

this.setData({var2:e.detail.value?'开':'关'})

},

sw3:function(e){

this.setData({var3:e.detail.value?'已选':'未选'})

}

})

效果图:

（5）slider

slider组件为滑动选择器，可以通过滑动来设置相应的值，其属性如下表所示。

示例代码如下：

//index.wxml

默认 min=0 max=100 step=1

显示当前值

设置 min=20 max=200 step=10

背景条红色，已选定颜色绿色

滑动改变icon的太小

//index.js

Page({

data:{

size:'20'

},

slidechange:function(e){

this.setData({size:e.detail.value})

}

})

效果图:

（6）picker

picker组件为滚动选择器，当用户点击picker组件时，系统从底部弹出选择器供用户选择。picker组件目前支持5种选择器，分别是：selector（普通选择器）、multiSelector（多列选择器）、time（时间选择器）、date（日期选择器）、region（省市选择器）。

     普通选择器

普通选择器（mode=selector）的属性如下表所示。

示例代码如下：

//index.wxml

---range为数组---

当前选择：{{array[index1]}}

---range为数组对象--

当前选择：{{objArray[index2].name}}

//index.js

Page({

data:{

array:['Java','Python','C','C#'],

objArray:[

{id:0,name:'Java'},

{id:1,name:'Python'},

{id:2,name:'C'},

{id:3,name:'C#'}

],

index1:0,

index2:0

},

arrayChange:function(e){

console.log('picker值变为',e.detail.value)

var index=0;

this.setData({

index1:e.detail.value

})

},

objArrayChange:function(e){

console.log('picker值变为',e.detail.value)

this.setData({

index2:e.detail.value

})

}

})

效果图:

  多列选择器

       多列选择器（mode=multiSelector）允许用户从不同列中选择不同的选择项，其选项是二维数组或数组对象。多列选择器的属性如下表所示。

示例代码如下：

//index.wxml

多列选择器

range="{{multiArray}}">

当前选择:{{multiArray[0][multiIndex[0]]}},{{multiArray[1][multiIndex[1]]}},{{multiArray[2][multiIndex[2]]}}

//index.js

Page({

data:{

multiArray:[['陕西省','广东省'],['西安市','汉中市','延安市'],['雁塔区','长安区']],

multiIndex:[0,0,0]

},

//绑定Multipicker

bindMultiPickerChange:function(e){

console.log('picker发送选择改变,携带值为',e.detail.value)

this.setData({

multiIndex:e.detail.value

})

},

//绑定MultiPickerColumn

bindMultiPickerColumnChange:function(e){

console.log('修改的列为',e.detail.column,',值为',e.detail.value);

var data={

multiArray:this.data.multiArryay,

multiIndex:this.data.multiIndex

};

data.multiIndex[e.detail.column]=e.detail.value;

switch(e.detail.column){

case 0:

switch(data.multiIndex[0]){

case 0:

data.multiArray[1]=['西安市','汉中市','延安市'];

data.multiArray[2]=['雁塔区','长安区'];

break;

case 1:

data.multiArray[1]=['深圳市','珠海市'];

data.multiArray[2]=['南山区','罗湖区'];

break;

}

data.multiIndex[1]=0;

data.multiIndex[2]=0;

break;

case 1:

switch(data.multiIndex[0]){

case 0:

switch(data.multiIndex[1]){

case 0:

data.multiArray[2]=['雁塔区','长安区'];

break;

case 1:

data.multiArray[2]=['汉台区','南郑区'];

break;

case 2:

data.multiArray[2]=['宝塔区','子长县','延川县'];

break;

}

break;

case 1:

switch(data.multiIndex[1]){

case 0:

data.multiArray[2]=['南山区','罗湖区'];

break;

case 1:

data.multiArray[2]=['香洲区','斗门区'];

break;

}

break;

}

data.multiIndex[2]=0;

console.log(data.multiIndex);

break;

}

this.setData(data);

},

})

效果图:

时间选择器、日期选择器

时间选择器（mode=time）可以用于从提供的时间选项中选择相应的时间，其属性如下表所示。

日期选择器（mode=date）可以用于从提供的日期选项中选择相应的日期，其属性如下表所示。

示例代码如下：

//index.wxml

选择的日期：{{date}}

选择的时间：{{time}}

//index.js

Page({

data:{

startdate:2000,

enddate:2050,

date:'2018',

starttime:'00:00',

endtime:'12:59',

time:'8:00'

},

changedate:function(e){

this.setData({date:e.detail.value});

console.log(e.detail.value)

},

changetime:function(e){

this.setData({time:e.detail.value})

console.log(e.detail.value)

}

})

效果图:

   省市选择器

      省市选择器（mode=region）是小程序的新版本提供的选择快速地区的组件，其属性如下表所示。 

 示例代码如下：

//index.wxml

选择省市区：{{region[0]}},{{region[1]}},{{region[2]}}

//index.js

Page({

data:{

region:['陕西省','西安市','长安区'],

customitem:'全部'

},

changeregion:function(e){

console.log(e.detail.value)

this.setData({

region:e.detail.value

})

}

})

效果图:

（7）picker-view

picker-view组件为嵌入页面的滚动选择器。相对于picker组件，picker-view组件的列的个数和列的内容由用户通过自定义设置。picker -view组件的属性如下表所示。

示例如下：

//index.wxml

当前日期:{{year}}年{{month}}月{{day}}日

value="{{value}}" bindchange="bindchange">

{{item}}年

{{item}}月

{{item}}日

//index.js

const date=new Date()

const years=[]

const months=[]

const days=[]

//定义年份

for(let i=1900;i<=2050;i++){

years.push(i)

}

//定义月份

for(let i=1;i<=12;i++){

months.push(i)

}

//定义日期

for(let i=1;i<=31;i++){

days.push(i)

}

Page({

data:{

years:years,

months:months,

days:days,

year:date.getFullYear(),

month:date.getMonth()+1,

day:date.getDate(),

value:[118,0,0],

},

//定位到2018年1月1日

bindChange:function(e){

const val=e.detail.value

console.log(val);

this.setData({

year:this.data.years[val[0]],

month:this.data.months[val[1]],

day:this.data.days[val[2]]

})

}

})

效果图:

（8）input

input组件为输入框,用户可以输入相应的信息，其属性如下表所示。

示例代码如下所示：

//index.wxml

你输入的是：{{inputValue}}

//index.js

Page({

data:{

focus:false,

inputValue:""

},

bindButtonTap:function(){

this.setData({

focus:true

})

},

bindKeyInput:function(e){

this.setData({

inputValue:e.detail.value

})

},

bindReplaceInput:function(e){

var value =e.detail.value

var pos =e.detail.cursor

if(pos!=-1){

//光标在中间

var left =e.detail.value.slice(0,pos)

//计算光标的位置

pos =left.replace(/11/g,'2').length

}

//直接返回对象,可以对输入进行过滤处理,同时可以控制光标的位置

return{

value:value.replace(/11/g,'2'),

Cursor:pos

}

//或者直接返回字符串,光标在最后边

//return value.replace( /11 /g,'2'),

}

})

效果图：

（9）textarea

textarea组件为多行输入框文件，可以实现多行内容的输入。textarea组件的属性如下表所示。

示例代码如下：

//index.wxml