<template>
    <view class="out">
        <view class="sosuo">
            <image></image>
            <u-search placeholder="搜索您需要的商品" v-model="keyword" height="60" :show-action="false"></u-search>
        </view>
        <u-tabs-swiper @change="tabsChange" :show-bar="false" :bold="false" :font-size="32" active-color="#FF780F" ref="uTabs" :list="list" :is-scroll="false" style="border-bottom: 1px solid #ececec;flex-shrink:0" height="88"></u-tabs-swiper>
        <swiper class="swiper"  :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
            <swiper-item>
                <scroll-view :scroll-y="true" style="height:100%">
                    <view style="padding-top:30rpx">
                        <shop></shop>
                        <shop></shop>
                        <shop></shop>
                        <shop></shop>
                        <shop></shop>
                    </view>
                </scroll-view>
            </swiper-item> 
            <swiper-item> 
                <scroll-view :scroll-y="true" style="height:100%">
                    <view class="list">
                        <darenItem style="margin-top:20rpx;margin-right:23rpx;box-shadow:0rpx 3rpx 7rpx 0rpx rgba(153, 153, 153, 0.35);" v-for="item in 50"></darenItem>
                    </view>
                </scroll-view>
            </swiper-item>
        </swiper>
    </view>
</template>
<style lang="scss" scoped>
.out{
    display: flex;
    flex-direction: column;
    height: 100vh;
    .sosuo{
        width: 100%;
        height: 88rpx;
        border-bottom: 1rpx solid #ececec;
        display: flex;
        align-items: center;
        padding: 0 30rpx;
        flex-shrink: 0;

        >image{
            width: 18rpx;
            height: 32rpx;
            margin-right: 24rpx;
            flex-shrink: 0;
        }
        align-items: center;
    }
    .swiper{
        width: 100%;
        height: 100%; 
        .list{
            display: flex;
            flex-wrap: wrap;
            width: 100%;
            padding-left: 30rpx;
        }
    }
}
</style>
<script>
import shop from "../components/search/shop"
import darenItem from "@/components/index/daren-item/index" 
export default {
    name:"out",
    components:{
        shop,
        darenItem
    },
    data(){
        return {
            list:[
                {
                    name:"店铺"
                },{
                    name:"达人"
                }
            ],
            current: 0, 
            swiperCurrent: 0,
            keyword:""
        }
    }, methods: { 
        tabsChange(index) {
            this.swiperCurrent = index; 
        }, 
        transition(e) { 
            let dx = e.detail.dx; 
            this.$refs.uTabs.setDx(dx); 
        },
        animationfinish(e) { 
            let current = e.detail.current; 
            this.$refs.uTabs.setFinishCurrent(current); 
            this.swiperCurrent = current; 
            this.current = current; 
        }
    }
}
</script>