田園項目分類頁面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>

總結

以上是生活随笔為你收集整理的田园项目分类页面的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。