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

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

演示用例

.container{
  background-color: red;
}

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

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

scroll-view 视图组件

官网的介绍
>https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html

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

演示



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

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

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

swiper组件

俗称轮播图
官方介绍
>https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

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

演示



  
    
      
    
  

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

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

演示

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

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

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

文章标题：「小程序JAVA实战」小程序的组件（23）
文章起源：http://cdxtjz.cn/article/jepiei.html

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

组件

view视图组件

scroll-view 视图组件

swiper组件

其他资讯