「零基础小程序开发」复制粘贴就能做自己的小程序（2）

近两年来，微信小程序的发展如火如荼，普及率越来越高，越来越多的人开始希望学习微信小程序开发，但是却不知道该如何下手，本教程将通过一个个功能案例来带你一步步熟悉微信小程序开发，并可以在手机上体验小程序的实际效果。

通过之前的学习，相信大家都已经顺利完成自己的第一个小程序了，不过是不是感觉首页只显示了一个“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看看实际效果吧，看看是不是和下图一样？

今天就先介绍到这里，不知道是否对大家有帮助。接下来的课程我们会继续通过一个个功能示例来让大家尽快熟悉小程序的开发。对于新手来说学起来效率会更高，而且更实用，跟着做下来小程序基本就开发成功了，是不是一举多得了。