第四章总结

4.1 组件的定义及属性

<标签名 属性名 ="属性值"> 内容  < /标签名>

4.2 容器视图组件

4.2.1 view

表4-1 view组件的特有属性

4.2.2 scroll-view

 表 4-2 scroll-view组件属性

4.2.3 swiper

表4-3  swiper组件属性 

4.3 基础内部组件

4.3.1 icon

表4-4 icon组件属性 

 4.3.2 text

表4-5 text组件属性

4.3.3 progress

表 4-6  progress组件属性

4.4 表单组件

4.4.1 button

表 4-7  button组件属性

4.4.2 radio 

表4-8 radio-group及radio组件属性

 4.4.3 checkbox

表4-9 checkbox-group  及checkbox组件属性

4.4.4 switch

表4-10 switch组件属性

4.4.5 silder

表4-11 silder 组件属性

4.4.6 picker

表 4-12 picker组件中selector选择器属性

表4-13 picker 组件multiselector 选择器属性

表4-14picker组件time选择器属性 

表4-15 picker组件date选择器属性 

表4-16picker组件region选择器属性

4.4.7 picker-view

表4-17 picker-view  组件属性

4.4.8 input

表4-18 input组件属性 

4.4.9 textarea 

表4-19 textarea组件属性 

4.4.11 form

表 4-20 form组件属性

4.5 多媒体组件

4.5.1 image

表4-21 image组件属性

4.5.2 audio

表4-22 audio组件属性

4.5.3 video

表4-23 video组件属性

4.5.4 camera

表4-24 camera 组件属性

4.6 其他组件

4.6.1 map

表 4-25 map组件属性 

表4-26 map组件markers属性的相关属性

表4-27 map组件polyline属性的相关属性 

示例代码如下：

//.wxml
<map id ="map"
longitude="108.9200"//中心点经度
latitude="34.1550"//中心点纬度
sCale ="14"//缩放比例
controls="{{lcontrols}}"//地图上显示控件
bindcontroltap="controltap"//点击控件时触发
markers="{{imarkers}}"/标记点
bindmarkertap="markertap"//点击标记点时触发
polyline="{{polyline!}}"/路线点
bindregionchange="regionchange"//视野发生改变时触发
show-location
style="width:100%;height:300px;">
</map>

//.js
Page({
data:{
markers:[{ //标记点

iconPath:"/pagee/dw.png",
id:0,
longitude:"108.9290",
latitude:"34.1480",
width:50,
height:50
}],
polyline:[{ //线路
points:[
  { //线路点1
    longitude："108.9200",
    latiude:"34.1400",
  },
}
longitude："108.9200", //线路点2
    latiude:"34.1500"
},
}
longitude:"108.9200", //线路点3
    latitude:"34.1700"
}
],
color:"#00ff00",
width:2,
dottedLine:true
}],
controls:[{ //控件的相关信息
  id:1,
  iconPath:'/pages/dw.png',
  position:{
    left:0,
    top:300,
    width:30,
    height:30
  },
  clickable:true
}]
},
regionchange(e){
  console.log(e.type)
},
markertap(e){
  console.log(e.markerid)
},
controltap(e){
  console.log(e.controlid)
}
})

 

 

4.6.2 canvas

表4-28 canvas组件属性 

 

var context =wx.creatCanvascontext( 'myCanvas' )
context.setFillStyle('green') //设置绘图上下文的填充色为绿色
context.fillRect(10,10,200,100) //方法画一个矩形,填充为设置的绿色
context.draw()
//.wxml
<canvas canvas -id ="myCanvas" style = "border: 1px solid red;"/>
//.js
Page( {
onLoad: function(options)
var ctx = wx.createcanvascontext( 'myCanvas')
ctx.setFillStyle( 'green')
ctx.fillRect(10,10,200,100)
ctx.draw()
}
})