java组件的一个例子_「小程序JAVA实战」小程序的组件（23）

开始了解下小程序的组件。源码：https://github.com/limingios/wxProgram.git 中的No.10

组件多个组件构成一张视图页面

>经过样式和布局，页面其实理解成html

组件包含结束标签>

每个组件都包含一些公用属性

官方的阐述https://developers.weixin.qq.com/miniprogram/dev/component/

view视图组件view 组件

>用的最多的，也是之前的样例也讲过。https://developers.weixin.qq.com/miniprogram/dev/component/view.html

演示用例

.container{

background-color: red;

}

.hover-class{

background-color: gray;

}

scroll-view 视图组件官网的介绍

>https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html

演示

bindscrolltoupper="scrolltoupper"

bindscrolltolower="scrolltolower"

upper-threshold="0"

lower-threshold="0"

scroll-top="100"

enable-back-to-top="true"

scroll-with-animation="true"

bindscroll="scroll"

scroll-into-view="b"

>

a

b

c

d

e

a

b

c

d

e

//scroll-view.js

//获取应用实例

Page({

scrolltoupper:function(){

console.log("滚动到顶部");

},

scrolltolower:function(){

console.log("滚动到底部");

},

scroll:function(){

console.log("滚动中。。。");

}

}).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” 在开发工具没办法演示只能在手机上才能演示出来点击直接到达顶部的效果。关于scrollview 只有横向和纵向，其实这块还是比较重要的多加练习吧。

swiper组件俗称 轮播图

官方介绍

>https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

演示

autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">

 indicator-dots 

 autoplay 

 interval

 duration//swiper.js

//获取应用实例

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

})

}

})

演示

damping='100' friction='100' bindchange='onchange' bindscale='onscale' scale="true">

.container{

background-color: red;

width: 100%;

height: 650rpx;

}

.size{

background-color: yellow;

width: 300rpx;

height: 250rpx;

}//movable.js

//获取应用实例

Page({

onchange:function(){

console.log("在移动。。");

},

onscale:function(){

console.log("在缩放")

}

})

PS：跟老铁一起过了一遍wx小程序关于视图的api，感觉还是组件很丰富，很好用！