wepy小程序实现选项卡

先上效果：

本文是基于前面几篇文章：

使用wepy开发微信小程序商城第一篇：项目初始化

使用wepy开发微信小程序商城第二篇：路由配置和页面结构

使用wepy开发微信小程序商城第三篇：购物车（布局篇）

wepy小程序实现列表分页上拉加载（1）

wepy小程序实现列表分页上拉加载（2）

正文开始：

1.新建一个需要选项卡的页面

（1）pages下面其他页面复制一份，修改文件名，删掉内容，保留结构。pages/tab.wpy

（2）打开app.wpy，config里面添加页面路由

config = {

  pages: [

    'pages/home', // 首页

    'pages/category', // 分类

    'pages/cart', // 购物车

    'pages/member', // 会员中心

    'pages/list', // 列表页

    'pages/tab' // 选项卡演示页

  ],

}

（3）在首页home.wpy添加一个导航，作为选项卡演示页的入口

<template>

  <view class="container">

    <view class="nav">

      <navigator url="/pages/list">演示上拉加载列表</navigator>

      <navigator url="/pages/tab">选项卡</navigator>

    </view>

  </view>

</template>

现在2个导航了，是时候美化一下，css如下：

.nav {

  text-align: center;

  padding: 20rpx;

  navigator {

    margin-bottom: 30rpx;

    background-color: #f5f5f5;

    border-radius: 10rpx;

    line-height: 48rpx;

    padding: 10rpx 50rpx;

    color: #333;

  }

}

2.选项卡布局

打开tab.wpy

（1）静态布局

tempate结构代码：

<template>

  <view>

    <!-- 选项卡导航 -->

    <view class="swiper-tab">

      <view wx:for="{{tabList}}" wx:key="index" class="swiper-tab-list {{currentTab==index ? 'active' : ''}}" bindtap="switchNav({{index}})">

        {{item.name}}

        <view class="dot" wx:if="{{item.dotNum>0}}">{{item.dotNum}}</view>

      </view>

    </view>

    <!-- 切换的内容 -->

    <view class="tab-content" wx:if="{{currentTab===0}}">选项卡演示内容1111111</view>

    <view class="tab-content" wx:if="{{currentTab===1}}">选项卡演示内容2222222</view>

    <view class="tab-content" wx:if="{{currentTab===2}}">选项卡演示内容3333333</view>

  </view>

</template>

css:

.swiper-tab {

  width: 100%;

  border-bottom: 1rpx solid #eee;

  text-align: center;

  line-height: 80rpx;

  display: flex;

  justify-content: space-between;

  flex-wrap: wrap;

  background: #fff;

}

.swiper-tab-list {

  font-size: 30rpx;

  color: #777777;

  padding: 0 40rpx;

  position: relative;

}

.active {

  color: #eb6623;

  border-bottom: 5rpx solid #eb6623;

}

.dot {

  position: absolute;

  display: flex;

  width: 37rpx;

  height: 35rpx;

  line-height: 40rpx;

  text-align: center;

  align-items: center; /* 垂直居中 */

  justify-content: center; /* 水平居中 */

  background: #eb6623;

  border-radius: 100px;

  color: #fff;

  z-index:;

  font-size: 26rpx;

  top:;

  right: 10rpx;

}

.tab-content {

  text-align: center;

  padding: 100rpx 50rpx;

}

js data对象：

data = {

    tabList: [

      {

        name: '未使用',

        dotNum: 2

      },

      {

        name: '已使用',

        dotNum: 3

      },

      {

        name: '已过期',

        dotNum: 10

      }

    ],

    currentTab: 0

  }

（2）点击切换

  methods= {

    switchNav(i, e) {

      if (this.currentTab === i) {

        return false

      } else {

        this.currentTab = i

        this.$apply()

      }

    }

  }

记得执行 npm run dev ，再打开微信开发者工具预览效果哟~

最终效果如开头的图

谢谢！