小程序中的页面切换3(无需新建页面，顶部导航栏)

不用新建页面，但是也挺死板的，需要每个页面的内容都差不多，如果需要页面不同的话可以参考我的 小程序中的页面切换1（https://blog.csdn.net/qq_44699174/article/details/106626522）

效果图：

wxml:

<view class="search">
  <van-tabs active="{{active}}">
   <van-tab wx:for="{{product}}" title="{{item.name}}" wx:key="product.id">
    <List2 products="{{productAll[item.id]}}" />这是我引用的组件，根据自己的需求编写。

   </van-tab>
  </van-tabs>
</view>

js：

data: {
    active: 0,
    // values:5,
    //当前定位位置
    latitude: null,
    longitude: null,
    // 目的地坐标
    latitude2: 5145,
    longitude2: 234,
    // 产品分类
    product: [
      {
        id:0,
        name:'美食',
      },
      {
        id:1,
        name:'民宿'
      },
      {
        id: 2,
        name: '交通停车'
      },
      {
        id: 3,
        name: '研学'
      },
      {
        id: 4,
        name: '乡游活动'
      },
      {
        id: 5,
        name: '农产'
      },
      {
        id: 6,
        name: '演艺游乐'
      },
      {
        id: 7,
        name: '展览'
      }
    ],
    productAll:[
      //美食
      [
        //1.
       {
        "id":0,
        "image_small":"../../image/1.jpg",
        "title":"【活动回顾】水库鳢长桌宴",
        // "commentValue":10,
        "date":util.formatTime(new Date()),
        "address":"漕泾镇水库村长堰路",
        "distance":null,
        "name":"报名",
        "latitude2": 116.403119,
        "longitude2": 39.913607,
       },
       {
        "id":0,
        "image_small":"../../image/1.jpg",
        "title":"【活动回顾】水库鳢长桌宴",
        "commentValue":10,
        "date":util.formatTime(new Date()),
        "address":"漕泾镇水库村长堰路",
        "distance":null,
        "name":"报名"
       },
      ],
      [//minsu
        {
          // "id":1,
          // "image_small":"../../image/1.jpg",
          // "title":"【活动回顾】水库鳢长桌宴",
          // "commentValue":10,
          // "date":"2019年9月22日",
          // "address":"漕泾镇水库村长堰路",
          // "distance":"918km",
          // "name":"报名"
         
        },
        
      ],
    ]
  },