不用新建页面,但是也挺死板的,需要每个页面的内容都差不多,如果需要页面不同的话可以参考我的 小程序中的页面切换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":"报名"
},
],
]
},