其实我理解的小程序的组件，就类似于H5的新标签，微信把一些功能封装在标签里，我们使用不同的标签，就会实现不同的功能，小程序称这些为组件。
下面通过案例来讲解组件
一、轮播图---组件：swiper
8.jpg
轮播图小案例
<!--text.wxml-->
<view class="page">
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{true}}" interval="{{interval}}" duration="{{duration}}" circular="true">
<block wx:for="{{imgs}}">
<swiper-item>
<image src="{{item}}"/>
</swiper-item>
</block>
</swiper>
</view>
//text.js
Page({
data:{
//是否显示面板指示点
indicatorDots:true,
//自动切换时间间隔
interval:1000,
//滑动动画时长
duration:1000,
imgs:[
'/img/1.jpg',
'/img/2.jpg',
'/img/3.jpg',
'/img/4.jpg',
]
}
})
//text.wxss
image{
width: 750rpx;
}
实现效果
GIF.gif
二、下拉加载---组件:scroll-view
使用竖向滚动时，需要给<scroll-view/>一个固定高度，通过 WXSS 设置 height。
相关属性如下：
02.jpg
下拉加载小案例
text.wxml文件中
<view class="page">
<scroll-view scroll-y="{{true}}" class="scroll" scroll-top="100" bindscrolltolower="lower" bindscrolltoupper="upper">
<view class="inner"></view>
</scroll-view>
</view>
text.js文件夹中
Page({
lower:function(){
console.log("看这里，看这里~lower")
},
upper:function(){
console.log("看这里，看这里~upper")
}
})
text,wxss中
.scroll{
background-color: green;
height: 300px;
}
.inner{
height: 500px;
}
上栗表示，当滚动条距离顶部100px时，打印“看这里，看这里upper”，当滚动条距离底部100px时，打印“看这里，看这里lower”
运行效果
GIF.gif
三、滚动条---组件：progress
03.jpg
滚动条案例
text.wxml
<view class="page">
<progress percent="100" active show-info stroke-width="20" color="skyblue" />
</view>
表示一个进度百分比为100的进度条，宽是20px，颜色为天蓝，active表示激活，并且在右侧显示备份比
效果如图所示
GIF.gif
四、滚动选择器---组件：picker-view
相关属性如下如所示
04.jpg
滚动选择器小案例
text.wxml
<view class="page center">
<view>{{selname}}-{{seladdr}}-{{selthing}}</view>
<picker-view value="{{value}}" bindchange="change" indicator-style="height:50px" style="width:100%;height:300px" >
<picker-view-column>
<view wx:for="{{name}}" class="item1">{{item}}</view>
</picker-view-column>
<picker-view-column>
<view wx:for="{{address}}" class="item1">{{item}}</view>
</picker-view-column>
<picker-view-column>
<view wx:for="{{thing}}" class="item1">{{item}}</view>
</picker-view-column>
</picker-view>
</view>
text.js
Page({
data:{
selname:'小明',
seladdr:'在学校',
selthing:'学习',
value:[0,0,0],
name:["小明","小红","小兰","小粉"],
address:["在学校","在班级","在家","在饭店"],
thing:["学习","吃饭","上厕所","看电视"]
},
change:function(e){
//当滚动的时候，获取滚动的事件对象，获取事件对象的标准格式，获取的是一个数组
var val = e.detail.value;
//this.setData是设置参数的标准格式
this.setData({
selname:this.data.name[val[0]],
seladdr:this.data.address[val[1]],
selthing:this.data.thing[val[2]]
})
},
})
text.css
.item1{
height: 50px;
line-height: 50px;
}
运行效果
GIF.gif
五、弹起的滚动器---组件：picker
从底部弹起的滚动选择器，现支持三种选择器，通过mode来区分，分别是普通选择器，时间选择器，日期选择器，默认是普通选择器。
051.jpg
052.jpg
053.jpg
text.wxml
滚动器小案例
<view class="page center">
<picker bindchange="change" value="{{index}}" range="{{arrayObject}}">
<view class="picker">{{arrayObject[index]}}</view>
</picker>
</view>
text,js
Page({
data:{
index:0,
arrayObject:["北京","武汉","深圳","上海"]
},
change:function(e){
this.setData({
index:e.detail.value
})
}
})
运行效果
GIF.gif
