181 lines
2.9 KiB
Vue
181 lines
2.9 KiB
Vue
<template>
|
|
<view class="about">
|
|
<scroll-view class="scr" scroll-x="true" :scroll-into-view="currentId">
|
|
<view class="list">
|
|
<view class="item" :id="'s'+index" :class="index == current ? 'active' : '' "
|
|
@click="changeTitle(index)"
|
|
v-for="(item, index) in tabsList"
|
|
:key="index">
|
|
{{ item.title }}
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
|
|
<swiper class="swiper"
|
|
:current="current"
|
|
@change="swiperChange" >
|
|
<swiper-item v-for="(item,index) in tabsList" :key="index">
|
|
<view v-for="(j,i) in item.content" :key="i" class="swiper-item uni-bg-red">
|
|
{{j.title}}
|
|
</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
current: 0,
|
|
currentId: 's0',
|
|
tabsList: [{
|
|
id: 1,
|
|
title: '首页',
|
|
page: 1,
|
|
content: [{
|
|
title: '首页1'
|
|
},
|
|
{
|
|
title: '首页2'
|
|
},
|
|
{
|
|
title: '首页3'
|
|
},
|
|
],
|
|
},
|
|
{
|
|
id: 2,
|
|
title: '社会',
|
|
content: [{
|
|
title: '社会1'
|
|
},
|
|
{
|
|
title: '社会2'
|
|
},
|
|
{
|
|
title: '社会3'
|
|
},
|
|
],
|
|
},
|
|
{
|
|
id: 3,
|
|
title: '新闻',
|
|
content: [{
|
|
title: '新闻1'
|
|
},
|
|
{
|
|
title: '新闻2'
|
|
},
|
|
{
|
|
title: '新闻3'
|
|
},
|
|
],
|
|
},
|
|
{
|
|
id: 4,
|
|
title: '咨询',
|
|
content: [{
|
|
title: '咨询1'
|
|
},
|
|
{
|
|
title: '咨询2'
|
|
},
|
|
{
|
|
title: '咨询3'
|
|
},
|
|
],
|
|
},
|
|
{
|
|
id: 4,
|
|
title: '咨询',
|
|
content: [{
|
|
title: '咨询1'
|
|
},
|
|
{
|
|
title: '咨询2'
|
|
},
|
|
{
|
|
title: '咨询3'
|
|
},
|
|
],
|
|
},
|
|
{
|
|
id: 4,
|
|
title: '咨询',
|
|
content: [{
|
|
title: '咨询1'
|
|
},
|
|
{
|
|
title: '咨询2'
|
|
},
|
|
{
|
|
title: '咨询3'
|
|
},
|
|
],
|
|
},
|
|
{
|
|
id: 4,
|
|
title: '咨询',
|
|
content: [{
|
|
title: '咨询1'
|
|
},
|
|
{
|
|
title: '咨询2'
|
|
},
|
|
{
|
|
title: '咨询3'
|
|
},
|
|
],
|
|
},
|
|
{
|
|
id: 4,
|
|
title: '咨询',
|
|
content: [{
|
|
title: '咨询1'
|
|
},
|
|
{
|
|
title: '咨询2'
|
|
},
|
|
{
|
|
title: '咨询3'
|
|
},
|
|
],
|
|
},
|
|
{
|
|
id: 4,
|
|
title: '咨询',
|
|
content: [{
|
|
title: '咨询1'
|
|
},
|
|
{
|
|
title: '咨询2'
|
|
},
|
|
{
|
|
title: '咨询3'
|
|
},
|
|
],
|
|
},
|
|
]
|
|
}
|
|
},
|
|
onLoad() {
|
|
|
|
},
|
|
methods: {
|
|
changeTitle (index) {
|
|
this.current = index;
|
|
this.currentId = 's'+index
|
|
},
|
|
swiperChange(e) {
|
|
this.current = e.detail.current
|
|
this.currentId = 's'+this.current
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
@import "@/assets/less/page/about.less";
|
|
</style>
|