開發(fā)小程序的過程中咧七，為避免一些重復(fù)性工作廊营，可使用組件進(jìn)行開發(fā)歪泳，達(dá)到一次制作，多次使用的效果露筒。小程序組件可分為官方組件和自定義組件呐伞，本文將介紹swiper組件和自定義組件的使用。
1.swiper組件
swiper組件是滑塊視圖容器慎式，主要用來做圖片輪播伶氢。其中只能放置<swiper-item>組件，代碼及效果圖如下：
<view class="content">
<swiper indicator-dots="true" autoplay="true" interval="2000">
<swiper-item>
<image src="../images/haibao/haibao-1.jpg"></image>
</swiper-item>
<swiper-item>
<image src="../images/haibao/haibao-2.jpg"></image>
</swiper-item>
<swiper-item>
<image src="../images/haibao/haibao-3.jpg"></image>
</swiper-item>
</swiper>
</view>
其中
indicator-dots=”true“表示顯示面板指示點(diǎn)
autoplay="true"表示自動播放輪播圖
interval=”2000“表示自動切換時(shí)間間隔為2s瘪吏，單位是ms
更多屬性可查看官方文檔https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html
swiper組件效果圖
2.自定義組件
（1）新建components文件夾癣防，專門用于存放組件，在caipu文件夾右擊新建component會自動生成生成4個(gè)文件掌眠，分別是js蕾盯、json、wxml和wxss蓝丙。
components結(jié)構(gòu)
（2）在wxml和wxss文件中完成靜態(tài)頁面级遭。
caipu.wxml
<view>
<view class='item'>
<view>
<image src='{{item.img}}' style='width:75px;height:58px;'></image>
</view>
<view class='desc'>
<view class='title'>{{item.title}}</view>
<view class='count'>
<view>{{item.type}}</view>
<view class='liulan'>{{item.liulan}}</view>
<view class='pinglun'>{{item.pinglun}}</view>
</view>
</view>
</view>
<view class='hr2'></view>
</view>
caipu.wxss
.item{
display: flex;
flex-direction: row;
margin-left: 10px;
margin-bottom:5px;
margin-top:5px;
}
.desc{
margin-left: 20px;
line-height: 30px;
}
.title{
font-weight: bold;
}
.count{
display: flex;
flex-direction: row;
font-size: 12px;
color: #999999;
}
.liulan{
position: absolute;
right: 70px;
}
.pinglun{
position: absolute;
right: 10px;
}
（3）在caipu.json中聲明自定義組件
{
"component": true, // 聲名組件
"usingComponents": {} // 可引用其他組件
}
（4）設(shè)置caipu.js文件
Component({
/**
* 組件的屬性列表
*/
properties: {
item: { // 屬性名
type: Object, // 類型（必填）望拖，目前接受的類型包括：String, Number, Boolean, Object, Array, null（表示任意類型）
value: {
img: '../../images/list/food-4.jpg',
title: '搜狐新聞，手機(jī)用久了',
type: '廣告',
liulan: '4688瀏覽',
pinglun: '4評論'
} // 屬性初始值（可選）挫鸽，如果未指定則會根據(jù)類型選擇一個(gè)
},
},
/**
* 組件的初始數(shù)據(jù)
*/
data: {
},
/**
* 組件的方法列表
*/
methods: {
}
})
完成這步一個(gè)自定義組件就完成了说敏，接下來就在文件中引入并使用它！
(5)在cook.json中引入該組件
{
"usingComponents": {
"caipu": "../components/caipu/caipu"
}
}
(6)在cook.wxml中使用
<view class='list'>
<block wx:for="{{array}}" wx:key="index">
<caipu item="{{item}}"></caipu>
</block>
</view>
一個(gè)簡單的自定義組件的創(chuàng)建及使用就完成啦掠兄！
具體實(shí)現(xiàn)效果：
自定義組件效果圖
