前端开发系列101-小程序篇之小程序中的基础组件(三)

本文介绍小程序中的基础组件，主要包括swiper、scroll-view等组件的基本使用和综合示例。

1.0 swiper组件

swiper组件是小程序中使用频次最高的组件之一，属于视图容器类组件，它通过对自身属性进行简单配置就可以实现在前端开发中要写很多代码才能完成的轮播图效果。

随手截取几个小程序中swiper组件的使用情况，给出贴图。

这里列出swiper组件的主要属性

autoplay 是否自动切换，布尔类型，默认值为false。

circular 是否采用衔接滑动，布尔类型，默认值为false。

duration 控制滑块的动画时间，数值类型，默认值为500，单位是毫秒。

interval 控制自动切换的时间间隔，数值类型，默认值为5000，单位是毫秒。

vertical 控制滑块是否为纵向，布尔类型，默认值为false，设置为true表示纵向。

indicator-color显示面板指示点的默认颜色。

indicator-active-color当前选中(显示)的面板指示点的颜色。

indicator-dots 是否显示面板指示点，布尔类型，默认值为false表示不显示。

current当前所在滑块的索引(index)，数值类型，默认值为0，可以指定。

display-multiple-items 能够同时显示的滑块数量，数值类型，默认能同时只能显示1个滑块。

bindchange 当滑块的current改变时会触发该事件并执行绑定的方法，事件类型。

bindanimationfinish 当滑块动画结束的时候会触发该事件并执行绑定的方法，事件类型。

备注001 该组件中其它的诸如previous-margin（前边距）| next-margin（后边距） | skip-hidden-item-layout（是否跳过未布局滑块）|current-item-id（当前滑块所在的item-id）等不常用属性请自行查阅官方文档。

备注002 swiper-item 该组件可以且仅可放置在组件中，宽高自动设置为100%。
在swiper组件中仅可以直接放置swiper-item组件，否则会导致未定义的行为。如果需要配合使用wx:for等指令那么可以使用`block`标签来进行包裹。

这里我们以"花点时间的店"这个小程序的轮播图的实现为例给出示例代码

//001 wxml文件中的代码
<swiper indicator-dots="{{indicatorDots}}" autoplay interval="{{interval}}"
   duration="{{duration}}" circular  indicator-active-color="{{activeColor}}"
   bindanimationfinish='animationFinish' bindchange='currentIndexChange'>

  <block wx:for="{{dataArray}}">
    <swiper-item>
      <image src="{{item}}" class="slide-image"/>
    </swiper-item>
  </block>

</swiper>

//注释：
//indicator-dots 该属性控制显示面板知识点
//interval：动画自动切换的时间，这里设置为3000
//duration：滑块动画的时间，这里设置为500，其实默认就是500(可以不用设置)
//circular：使用衔接动画，个人感觉这样效果更好一些，不会跳转到开头重新开始
//indicator-active-color:给当前滑块的面板知识点设置为红色以区分
//bindanimationfinish: 注册了动画执行完毕后的事件，对应js文件中的animationFinish方法
//bindchange:注册了当前滑块切换的事件，对应js文件中的currentIndexChange方法

//002 wxss文件中的样式设置
swiper
{
  width: 750rpx;
  height: 750rpx;
}

.slide-image
{
  width: 750rpx;
  height: 750rpx;
}

//003 js文件中的代码
Page({
  data: {
    activeColor:"red",
    interval:3000,
    duration:500,
    indicatorDots:true,
    dataArray:[
      "https://github.com/flowerField/Source/blob/master/Blog/flower001.jpg?raw=true",
      "https://github.com/flowerField/Source/blob/master/Blog/flower002.jpg?raw=true",
      "https://github.com/flowerField/Source/blob/master/Blog/flower003.jpg?raw=true",
      "https://github.com/flowerField/Source/blob/master/Blog/flower004.jpg?raw=true",
      "https://github.com/flowerField/Source/blob/master/Blog/flower005.jpg?raw=true",
      "https://github.com/flowerField/Source/blob/master/Blog/flower006.jpg?raw=true",
      "https://github.com/flowerField/Source/blob/master/Blog/flower007.jpg?raw=true",
    ]
  },
  animationFinish:function(e){
      console.log("动画执行完毕---",e.detail);
  },
  currentIndexChange:function(e)
  {
    console.log("当前的滑块切换了", e.detail);
  }
})

这里给出上面的代码编译后在小程序中呈现的效果图。

2.0 scroll-view组件

scroll-view是小程序中的可滚动视图组件，支持竖向滚动和横向滚动，这里给出该组件在商业小程序中的应用示意图。

列出scroll-view组件的主要属性

scroll-x 允许横向滚动，布尔类型，默认值为false。

scroll-y 允许纵向滚动，布尔类型，默认值为false。

scroll-top 设置竖向滚动条的位置，数值类型。

scroll-left 设置横向滚动条的位置，数值类型。

scroll-with-animation 在设置滚动条位置时使用动画过渡，布尔类型，默认值为false。 upper-threshold 距顶部/左边多远时（单位px），触发scrolltoupper事件，默认值为50。 lower-threshold 距底部/右边多远时（单位px），触发scrolltolower事件，默认值为50。 scroll-into-view 其值应为某子元素id，表示在特定的方向上滚动到该元素。 enable-back-to-top iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向。

bindscroll 当组件滚动的时候会触发该事件，相关的数据保存在event.detail对象中。 bindscrolltoupper 当组件滚动到顶部/左边的时候会触发scrolltoupper事件。 bindscrolltolower 当组件滚动到底部/右边的时候会触发scrolltolower事件。

这里我们给出实现上面滚动效果的代码示例

//001 wxml文件中的内容
<scroll-view class='scroll-view-class'  scroll-x>
<view class='scroll-cell' wx:for='{{productData}}'>
  <view class='scroll-cell-view'>
      <image src='{{item.head_pic_url}}'></image>
  </view>
  <view class='scroll-cell-description'>
      <view class='scroll-cell-description-name'>{{item.name}}</view>
      <view class='scroll-cell-description-top'>top {{index + 1}}</view>
  </view>
  <view class='scroll-cell-price'>￥{{item.price}}</view>
</view>
</scroll-view>

//002 wxss文件中的内容

page{
  background: #eee;
  display: block;
}

.scroll-view-class
{
  width: 750rpx;
  height: 500rpx;
  display: flex;
  white-space: nowrap;
  margin-top: 20rpx;
  background: #fff
}

.scroll-cell
{
  width: 250rpx;
  height: 480rpx;
  display: inline-block;
  margin-right: 20rpx;
}

.scroll-cell-view image
{
  width: 250rpx;
  height: 300rpx;
}

.scroll-cell-description
{
  width: 250rpx;
  height: 100rpx;
  font-size: 25rpx;
  position: relative;
}

.scroll-cell-description-name
{
  width: 130rpx;
  height: 100rpx;
  line-height: 50rpx;
  white-space: normal;
}

.scroll-cell-description-top
{
  width: 80rpx;
  height: 40rpx;
  border: 1rpx solid #333;
  position: absolute;
  left: 150rpx;
  top: 30rpx;
  text-align: center;
}

//003 js文件中的内容
Page({
 data:{
   productData: [
     {
       "id": "700005",
       "head_pic_url": "https://qnoutbucket.immatchu.com/2018_9_18_058df245-8323-4afa-be14-918344e8db5e.jpg",
       "name": "白色厚款竹纤维衬衫",
       "price": "199.00",
       "sales_volume": 10188
     },
     {
       "id": "700004",
       "head_pic_url": "https://qnoutbucket.immatchu.com/2018_9_18_2d04651f-178a-47a0-8a1b-d76610e61f5d.jpg",
       "name": "藏青色厚款竹纤维衬衫",
       "price": "199.00",
       "sales_volume": 6120
     },
     {
       "id": "700006",
       "head_pic_url": "https://qnoutbucket.immatchu.com/2018_9_18_f2c106ac-3a25-4ec4-b93e-89deb4879152.jpg",
       "name": "黑色厚款竹纤维衬衫",
       "price": "199.00",
       "sales_volume": 5742
     },
     {
       "id": "700007",
       "head_pic_url": "https://qnoutbucket.immatchu.com/2018_9_18_0bade22f-0a02-4ded-b57c-3eba62be59cb.jpg",
       "name": "浅蓝色厚款竹纤维衬衫",
       "price": "199.00",
       "sales_volume": 3843
     },
     {
       "id": "700077",
       "head_pic_url": "https://qiniucdn.immatchu.com/mumall/image/new_head_pic/700077_head.jpg",
       "name": "浅蓝灰经典平绒牛津纺衬衫",
       "price": "199.00",
       "sales_volume": 3375
     },
     {
       "id": "700112",
       "head_pic_url": "https://qiniucdn.immatchu.com/mumall/image/new_head_pic/700112_head.jpg",
       "name": "水磨黑混纺休闲西裤",
       "price": "299.00",
       "sales_volume": 2889
     },
     {
       "id": "700105",
       "head_pic_url": "https://qnoutbucket.immatchu.com/2018_9_20_98795e44-4f2f-4fa6-aaad-ef09e6f1e435.jpg",
       "name": "水墨黑条纹弹力休闲西裤",
       "price": "299.00",
       "sales_volume": 2538
     },
     {
       "id": "75",
       "head_pic_url": "https://qnoutbucket.immatchu.com/2018_9_18_a64e80b0-60b2-4a8a-9b32-6918937ee642.jpg",
       "name": "天蓝竹纤维衬衫",
       "price": "199.00",
       "sales_volume": 2412
     },
     {
       "id": "700100",
       "head_pic_url": "https://qiniucdn.immatchu.com/mumall/image/new_head_pic/700100_2018_9_13_514efbe4-c18b-440e-8e0c-27b44daa7113.jpg",
       "name": "藏青色平纹棉休闲西裤",
       "price": "399.00",
       "sales_volume": 2232
     }
   ]
 }
})

这里贴出最终实现的效果图。