田園項目分類頁面tab組件使用

tab組件使用

先在 app.join 里配置組件路徑，
基礎(chǔ)用法：

<van-tabs active="{{ active }}" bind:change="onChange"><van-tab title="標簽 1">內(nèi)容 1</van-tab><van-tab title="標簽 2">內(nèi)容 2</van-tab><van-tab title="標簽 3">內(nèi)容 3</van-tab><van-tab title="標簽 4">內(nèi)容 4</van-tab> </van-tabs>

效果：

項目展示：

在js中寫入數(shù)據(jù)

data: {//當(dāng)前位置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:'研學(xué)'},{id:4,name:'鄉(xiāng)游活動'},{id:5,name:'農(nóng)產(chǎn)'},{id:6,name:'演藝游樂'},{id:7,name:'展覽'}],

再通過循環(huán)遍歷的方式展示出來

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。