wapshop/src/components/main/home/homeTabs.vue

<script>
    import BlockList from '../../blocks/block_list.vue'
    import Api from "../../../lib/api.js"
    import Search from "../../blocks/search"
    import {XHeader, Tab, TabItem, Divider, Flexbox, FlexboxItem} from 'vux'
    export default {
        created() {
            let _self = this;
            let arr = this.$route.path.split("\/");
            this.current_id = arr [arr.length - 1];

            this.$http.jsonp(Api.homeTabs(),).then(function (res) {
                _self.tabs = res.body.datas.tabs;
            })
        },
        data(){
            return {
                tabs: null,
                current_id: 0,
            }
        },
        methods: {
            isSelected(item, special_id){
                return item.special_id == special_id;
            }
        }
        ,
        render(createElement)
        {
            if (!this.tabs)
                return
            let nativeClickHandler = (index, item) => {
                this.current_id = item.special_id;
                this.$router.push({path: "" + this.current_id})
            }
            //tab
            const top_tabs = this.tabs.map((item, index) => {
                return <TabItem class="tab_item" selected={this.isSelected(item, this.current_id)}
                                nativeOnClick={ () => nativeClickHandler(index, item)}>{ item.name}</TabItem>
            })

            return (
                    <div>
                        <Search isScroll={this.isScroll}></Search>
                        <div>
                            <div class="list_tab" style = {{position:'fixed'}}>
                                <Tab style={{width: 150 * this.tabs.length + "px",background:"#fff"}}
                                customBarWidth="150px">{top_tabs}</Tab>
                                    </div>
                        </div>
                        <div class="list_container">

                                <router-view></router-view>
                        </div>
                    </div>
            )
        }

    }
</script>

<style scoped>
    img {
        vertical-align: bottom;
        width: 100%;
        height: auto;
        display: block;
    }

    .list_tab {
        position: relative;
        z-index: 1000;
        width: 100%;
        margin-top: 83px;
        overflow-y : auto;
        -webkit-box-sizing : border-box;
        -webkit-overflow-scrolling: touch;
        background: #fff;
    }

    .list_tab::-webkit-scrollbar {
        display: none;
    }

    .list_container {
        padding-top: 170px;
        padding-bottom: 101px;
    }

    .tab_item {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .list_hide {
        display: none;
    }
</style>