「小程序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
    })
  }
})

• 演示

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

另外有需要云服务器可以了解下创新互联cdcxhl.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。