「零基礎小程序開發」複製粘貼就能做自己的小程序（2）科技頭條網

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

2019-06-26 18:31:04 清單思維

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

通過之前的學習，相信大家都已經順利完成自己的第一個小程序了，不過是不是感覺首頁只顯示了一個“Hello World”有些單調了，下面我們來豐富一下首頁的內容。

課程要點

滑動選項卡，今天給大家詳細講解一下滑動Tab選項卡，實現左右可滑動切換的效果，希望能對大家有用處。

開始開發

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

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, //滑動距離
 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
 },
 })
 this.fetchTabData(0);
 },
 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>
 <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;
}

2、app.wxss

/**app.wxss**/
.container {
 height: 100%;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: space-between;
 box-sizing: border-box;
}

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