「零基礎小程序開發」複製粘貼就能做自己的小程序（3）

近兩年來，微信小程序的發展如火如荼，普及率越來越高，越來越多的人開始希望學習微信小程序開發，但是卻不知道該如何下手，本教程將通過一個個功能案例來帶你一步步熟悉微信小程序開發，並可以在手機上體驗小程序的實際效果。

通過上一章的學習，我們已經為小程序的首頁加上了滑動選擇卡的功能，這一章來說說輪播圖，最常見的輪播圖，中間帶小圓點，可以自動輪播圖片。

課程要點

Swiper是滑動特效插件，面向手機、平板電腦等移動終端。能實現觸屏焦點圖、觸屏Tab切換、觸屏多圖切換等常用效果。是目前應用較廣泛的移動端網頁觸摸內容滑動插件。

開始開發

首先，為了存放輪播所需的圖片，我們在images目錄下新建一個imgs文件夾，然後選擇3個自己喜歡的圖片存放進去，將文件名稱分別改為section-1.jpg,section-2.jpg,section-3.jpg。

下面將直接將代碼附上，你可以直接複製粘貼到你自己的小程序相應文件中即可。

1、index目錄

index.js

//index.js
//獲取應用實例
const app = getApp()
Page({
 data: {
 showtab: 0, //頂部選項卡索引
 showtabtype: '', //選中類型
 tabnav: {}, //頂部選項卡數據
 testdataall: [], //所有數據
 testdata: [], //數據列表
 startx: 0, //開始的位置x
 endx: 0, //結束的位置x
 critical: 100, //觸發切換標籤的臨界值
 marginleft: 0, //滑動距離
 banner:[
 {
 "id":1,
 "picUrl":"../../images/imgs/section-1.jpg",
 "title":"一點清單，為什麼精英人士都是清單控"
 },
 {
 "id": 2,
 "picUrl": "../../images/imgs/section-2.jpg",
 "title": "微習慣，簡單到不可能失敗的培養習慣的方法"
 },
 {
 "id": 3,
 "picUrl": "../../images/imgs/section-3.jpg",
 "title": "改變人生，從目標管理開始"
 }
 ],
 info: [
 {
 "id": 1,
 "type": 1,
 "text": "推薦" 

 },
 {
 "id": 2,
 "type": 2,
 "text": "熱點"
 },
 {
 "id": 3,
 "type": 3,
 "text": "科技"
 },
 {
 "id": 4,
 "type": 4,
 "text": "財經"
 },
 {
 "id": 5,
 "type": 5,
 "text": "創業"
 },
 ]
 },
 onLoad: function () {
 this.setData({
 tabnav: {
 tabnum: 5,
 tabitem: this.data.info
 },
 banners:this.data.banner,
 })
 this.fetchTabData(0);
 },
 //事件處理函數
 swiperchange: function (e) {
 //console.log(e.detail.current)
 this.setData({
 swiperCurrent: e.detail.current
 })
 },
 fetchData: function (t) { //生成數據
 const newquestions = [];
 for (let i = 0; i < 20; i++) {
 newquestions.push({
 "id": i + 1,
 "type": t,
 "text": "一點清單小程序，幫助我們打開新世界大門的思維方式，通過它可以提高效率，節省時間和精力，將成功的可能性提升到最大。" 

 })
 }
 return newquestions;
 },
 fetchTabData: function (i) {
 this.setData({
 testdata: this.fetchData(this.data.info[Number(i)].text)
 })
 
 },
 setTab: function (e) { //設置選項卡選中索引
 const edata = e.currentTarget.dataset;
 this.setData({
 showtab: Number(edata.tabindex),
 showtabtype: edata.type
 })
 console.log(edata.tabindex);
 this.fetchTabData(edata.tabindex);
 },
 scrollTouchstart: function (e) {
 let px = e.touches[0].pageX;
 this.setData({
 startx: px
 })
 },
 scrollTouchmove: function (e) {
 let px = e.touches[0].pageX;
 let d = this.data;
 this.setData({
 endx: px,
 })
 if (px - d.startx < d.critical && px - d.startx > -d.critical) {
 this.setData({
 marginleft: px - d.startx
 })
 }
 },
 scrollTouchend: function (e) {
 let d = this.data;
 if (d.endx - d.startx > d.critical && d.showtab > 0) {
 this.setData({
 showtab: d.showtab - 1,
 })
 // this.fetchTabData(d.showtab-1);
 } else if (d.endx - d.startx < -d.critical && d.showtab < this.data.tabnav.tabnum - 1) {
 this.setData({
 showtab: d.showtab + 1,
 })
 }
 this.fetchTabData(d.showtab); 

 this.setData({
 startx: 0,
 endx: 0,
 marginleft: 0
 })
 },
})

index.wxml

<view>
 <view>
 <swiper> autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" bindchange="swiperchange">
 <block>
 <swiper-item>
 <image>
 <view>{{item.title}}/<view>
 /<swiper-item>
 /<block>
 /<swiper>
 <view> 
 <block> 
 <view> 
 /<block> 
 /<view> 
 /<view>
 <view>
 <view>
 <view>
 <text>{{item.text}}/<text>
 <view>
 /<view>
 <view>
 <view>
 <view>
 <view>
 <view>類型：{{item.type}}/<view>
 <view>{{item.text}}/<view>
 /<view>
 /<view>
 /<view>
 <view>
 <view>
 <view>
 <view>類型：{{item.type}}/<view>
 <view>{{item.text}}/<view>
 /<view> 

 /<view>
 /<view>
 <view>
 <view>
 <view>
 <view>類型：{{item.type}}/<view>
 <view>{{item.text}}/<view>
 /<view>
 /<view>
 /<view>
 <view>
 <view>
 <view>
 <view>類型：{{item.type}}/<view>
 <view>{{item.text}}/<view>
 /<view>
 /<view>
 /<view>
 <view>
 <view>
 <view>
 <view>類型：{{item.type}}/<view>
 <view>{{item.text}}/<view>
 /<view>
 /<view>
 /<view>
 /<view>
 /<view>
 /<view>

/<view>

index.wxss

/**index.wxss**/
.tab{
 display: flex;
 flex-direction: column; 

 height: 100%;
}
.tab-nav{
 height: 80rpx;
 background: #fff;
 border-bottom: 1rpx solid #ddd;
 display: flex;
 line-height: 79rpx;
 position: relative;
}
.tab-nav text{
 display: block;
 flex: 1;
 text-align: center;
 width: 25%;
}
.tab-nav text.active{
 color: #f7982a;
}
.tab-line{
 position: absolute;
 left: 0;
 bottom: -1rpx;
 height: 4rpx;
 background: #f7982a;
 transition: all 0.3s;
}
.tab-content{
 width: 400%;
 height: 100%;
 overflow: hidden;
 display: flex;
}
.tab-content .tab-panel{
 height: 100%;
 overflow-y: auto;
 overflow-x: hidden;
 flex: 1;
 /* flex: 0 0 20%; */
}
.test-list{
 padding: 0 20rpx;
}
.question-list{
 padding: 20rpx;
}
.test-item{
 border-bottom: 1rpx solid #ddd;
 padding: 20rpx 0;
} 

.test-item-t{
 font-size: 34rpx;
}
.test-item-b{
 font-size: 30rpx;
 color: #888;
 display: -webkit-box;
 -webkit-line-clamp: 2;
 overflow: hidden;
 text-overflow: ellipsis;
 -webkit-box-orient: vertical;
}
.swiper-container{
 width: 100%;
 position: relative; 
}
.swiper_box {
 width: 100%;
 height:150px;
}
swiper-item image {
 display: inline-block;
 overflow: hidden;
 height:150px;
 width: 100%;
}
.swiper-container .dots{ 
 position: absolute; 
 left: 0; 
 right: 0; 
 bottom: 20rpx; 
 display: flex; 
 justify-content: center; 
} 
.swiper-container .dots .dot{ 
 margin: 0 8rpx; 
 width: 14rpx; 
 height: 14rpx; 
 background: #fff; 
 border-radius: 50%; 
 transition: all .6s; 
 opacity: .5;
} 
.swiper-container .dots .dot.active{ 
 width: 14rpx; 
 opacity: 1;
}
.swiper-title{
 position: absolute;
 bottom: 80px; 

 left: 10px;
 right:10px;
 font-size: 18px;
 font-weight:bold;
 color: #fff;
 text-shadow:2px 2px 4px #000;
}

好了，經過這些簡單的修改，我們小程序的輪播圖功能就實現了，將代碼拷入相應的文件，點擊開發工具中的編譯按鈕，或者使用快捷鍵Ctrl+S看看實際效果吧，看看是不是和下圖一樣？

今天就先介紹到這裡，不知道是否對大家有幫助。接下來的課程我們會繼續通過一個個功能示例來讓大家儘快熟悉小程序的開發。對於新手來說學起來效率會更高，而且更實用，跟著做下來小程序基本就開發成功了，是不是一舉多得了。