微信小程序学习笔记：选项卡

第一步：

在 .js 文件里定义数据：

    data: {
        tabs:[
            "选项1",
            "选项2",
            "选项3",
            "选项4"
        ],
        checked:0
    },

tabs 表示有几个选项，checked 表示当前选中的是哪一页的索引。

第二步：

在 .wxml 编写代码：

<view id="tabs" >
    <view wx:for="{
  {tabs}}" data-idx="{
  {index}}" 
class="item {
  {checked==index?'active':''}}" bindtap="navTip">
        {
  {item}}
    </view>
</view>

<swiper current="{
  {checked}}" class="swiper" duration="300" bindchange="bindChange"> 
  <swiper-item wx:for="{
  {tabs}}"> 
     <view>页面{
  {index+1}}</view>