vue 可 滚动的选项卡

1首先得安装we-vue  

 

html

 

<wv-tabs swipe-threshold:4 @click="tabActive">

<wv-tab

v-for="(value, index) in tablesTeacher"

:key="index"

:title="value"

>{{ index + 1 }}---{{ value }}</wv-tab>

<ul class="tabCon showon">

<li v-for="(value, index) in shopping" :key="index">

<p>{{ value.title }}</p>

<span>{{ value.num }}</span>

<img :src="value.img" alt="value.title" />

</li>

</ul>

<ul class="tabCon show">

<li

v-for="(value, index) in womanTeacher"

:key="index"

>{{ value.name }}--{{ value.sex }}--{{ value.age }}</li>

</ul>

<ul class="tabCon show">

<li

v-for="(value, index) in renyaoTeacher"

:key="index"

>{{ value.name }}--{{ value.sex }}--{{ value.age }}</li>

</ul>

<ul class="tabCon show">

<li

v-for="(value, index) in publicityTeacher"

:key="index"

>{{ value.name }}--{{ value.sex }}--{{ value.age }}</li>

</ul>

<ul class="tabCon show">

<li

v-for="(value, index) in xinaiTeacher"

:key="index"

>{{ value.name }}--{{ value.sex }}--{{ value.age }}</li>

</ul>

<ul class="tabCon show">

<li

v-for="(value, index) in serviceTeacher"

:key="index"

>{{ value.name }}--{{ value.sex }}--{{ value.age }}</li>

</ul>

</wv-tabs>

data

 

 

效果