田园项目分类页面

最新推荐文章于 2024-11-02 12:42:04 发布

前前前端废物

最新推荐文章于 2024-11-02 12:42:04 发布

阅读量162

点赞数

分类专栏：田园项目文章标签： javascript

本文链接：https://blog.csdn.net/wanghexiang1121/article/details/107231416

版权

田园项目专栏收录该内容

4 篇文章 0 订阅

订阅专栏

田园项目分类页面tab组件使用

tab组件使用

先在 app.join 里配置组件路径，在这里插入图片描述
基础用法：

<van-tabs active="{{ active }}" bind:change="onChange">
  <van-tab title="标签 1">内容 1</van-tab>
  <van-tab title="标签 2">内容 2</van-tab>
  <van-tab title="标签 3">内容 3</van-tab>
  <van-tab title="标签 4">内容 4</van-tab>
</van-tabs>

效果：
在这里插入图片描述
项目展示：

在这里插入图片描述
在js中写入数据

data: {
    //当前位置
    latitude: null,
    longitude:null,
    latitude2:116.403110,
    longitude2:39.913607,
    active:0,
    qiehuan:[
      {id:0,
        name:'美食'
      },
      {id:1,
        name:'民宿'
      },
      {id:2,
        name:'交通停车'
      },
      {id:3,
        name:'研学'
      },
      {id:4,
        name:'乡游活动'
      },
      {id:5,
        name:'农产'
      },
      {id:6,
        name:'演艺游乐'
      },
      {id:7,
        name:'展览'
      }
    ],

再通过循环遍历的方式展示出来

<view>
  <van-tabs active="{{ active }}" bind:change="onChange">
    <van-tab wx:for="{{qiehuan}}" wx:key="qiehuan.id" title="{{item.name}}">
		<!--内容-->
     
    </van-tab>
  </van-tabs>
</view>