uniapp使用scss

uniapp使用scss(图1)

uniapp使用scss(图2)

<template>

<view>

<view>

<view>

<view>

<uni-segmented-control

:values="items.map(v=>v.title)"

:current="current"

@clickItem="onClickItem"

style-text="text"

active-color="#d8934a"

>

</uni-segmented-control>

</view>

<view class="iconfont iconsearch search"></view>

</view>


<view>

<view v-if="current===0">

<home-recommend></home-recommend>

</view>

<view v-if="current===1">

<home-album></home-album>

</view>

<view v-if="current===2">

<home-new></home-new>

</view>

<view v-if="current===3">

<home-category></home-category>

</view>

</view>

</view>


</view>


</template>


<script>

//引入组件

import homeRecommend from "./home-recommend";//不用写index.vue

import homeNew from "./home-new";//不用写index.vue

import homeCategory from "./home-category";//不用写index.vue

import homeAlbum from "./home-album";//不用写index.vue


export default{

onLoad(){

this.request({

url:"http://bj.sgmwppi.cn/api/blog/swiper?mytoken=xgsdgsxg"

}).then(res=>{

console.log(res)

})

},

components:{

homeRecommend,

homeNew,

homeCategory,

homeAlbum

},

data(){

return{

items:[

{title:"推荐"},

{title:"分类"},

{title:"最新"},

{title:"最新"}

],

current:0

}

},


methods:{

onClickItem(e){

if(this.current!==e.currentIndex){

this.current=e.currentIndex;

}

}

}

}

</script>



<style>

.index_tab{

.index_tab_title{

position: relative;

.tab_inner{

width: 60%;

margin: 0 auto;

}

.search{

position: absolute;

top:50%;

transform: translateY(-50%);

right: 5%;

}

}

.index_tab_content{


}

}

</style>


您可能还会对下面的文章感兴趣: