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

原创文章，欢迎转载。转载请注明：转载自IT人故事会，谢谢！
原文链接地址：「小程序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

• 演示

  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

• 演示

  
    
      
    
  

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

image.png

• 演示

.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，感觉还是组件很丰富，很好用！