「小程序JAVA实战」小程序的组件（23）-蒲公英云

「小程序JAVA实战」小程序的组件（23）

男娘i 2022-01-12 07:13 341阅读 0赞

转自：https://idig8.com/2018/08/11/xiaochengxu-chuji-23/

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

组件

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

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

组件包含<开始标签></结束标签>

每个组件都包含一些公用属性
官方的阐述

https://developers.weixin.qq.com/miniprogram/dev/component/

1240

view视图组件

view 组件

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

1240 1

演示用例

.container{
background-color: red;
}

.hover-class{
background-color: gray;
}

1240 2

scroll-view 视图组件

官网的介绍

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

1240 3

1240 4

演示

a
b
c
d
e

<scroll-view class="container-nowrap" style='margin-top:250rpx' scroll-x='true' scroll-left="200">
  <view id="a" class='sizeX a'>a</view>
  <view id="b" class='sizeX b'>b</view>
  <view id="c" class='sizeX c'>c</view>
  <view id="d" class='sizeX d'>d</view>
  <view id="e" class='sizeX e'>e</view>
</scroll-view>
//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;
}

1240 5

注意：enable-back-to-top=”true” 在开发工具没办法演示只能在手机上才能演示出来点击直接到达顶部的效果。关于scrollview 只有横向和纵向，其实这块还是比较重要的多加练习吧。

swiper组件

俗称轮播图
官方介绍

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

1240 6

1240 7

1240 8

演示

<swiper indicator-dots=”{

{indicatorDots}}"

autoplay=”{

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

<block wx:for=”{

{imgUrls}}">
<swiper-item>
  <image src="{
{item}}" class="slide-image" width="355" height="150"/>
</swiper-item>

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
})

}
})

1240 9

演示

.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("在缩放")
```
}
})