appApplet/pages/tabbar/pagehome/pagehome.vue

80 lines
2.4 KiB
Vue

<template>
<view>
<status-container :ifReturn="false" titlet="首页">
<view slot="content">
<swiper-tab id="tab" :list="dataList" v-model="current" @changeEv="clickTab"></swiper-tab>
<chooseImgOne @chooseEv="chooseEv"></chooseImgOne>
<column-function @chooseEv="chooseEv" :list="funList"></column-function>
<!-- <gong-ge-function @chooseGe="chooseGe"></gong-ge-function> -->
<swiper-gong-ge @chooseGe="chooseGe"></swiper-gong-ge>
</view>
</status-container>
<!-- 底部tab -->
<foot-tab></foot-tab>
</view>
</template>
<script>
import swiperTab from '@/components/swiper-tab/swiper-tab.vue';
import footTab from '@/components/foot-tabs/foot-tab.vue';
import chooseImgOne from '@/components/choose-imgs/choose-img-one.vue';
import columnFunction from '@/components/function-list/column/column-function.vue';
import gongGeFunction from '@/components/function-list/gong-ge/gong-ge-function.vue';
import swiperGongGe from '@/components/function-list/swiper-gong-ge/swiper-gong-ge.vue';
export default {
components:{
'foot-tab' :footTab,
swiperTab,
chooseImgOne,
columnFunction,
gongGeFunction,
swiperGongGe
},
data() {
return {
current:0,
dataList:[
{title:'标题一'},
{title:'标题二标题二'},
{title:'标题三'},
{title:'标题四'},
{title:'标题五'},
{title:'标题六标题六标题六'},
{title:'标题七'},
{title:'标题八'},
{title:'标题九'},
],
funList:[
{url:'/pagesA/my-address/my-address',title:'地址选择',iconsrc:'',iconWidth:60,iconHeight:60,content:'',contentColor:'#999999',ifNext:true},
{url:'/pagesB/custom-editor/custom-editor',title:'富文本编辑',iconsrc:'',iconWidth:60,iconHeight:60,content:'',contentColor:'#999999',ifNext:true},
{url:'/pagesA/yy-img/yy-img',title:'图片',iconsrc:'',iconWidth:60,iconHeight:60,content:'',contentColor:'#999999',ifNext:true},
{url:'/pagesA/yy-video/yy-video',title:'视频',iconsrc:'',iconWidth:60,iconHeight:60,content:'',contentColor:'#999999',ifNext:true},
]
}
},
onLoad() {
},
methods: {
// tab点击事件
clickTab(index){
this.current = index;
},
// 图片选择事件
chooseEv(arr) {
console.log(arr,'图片数组');
},
chooseEv(obj) {
console.log(obj);
},
chooseGe(obj) {
console.log(obj);
}
}
}
</script>
<style>
page{background-color: #f7f7f7;}
</style>