zoukankan      html  css  js  c++  java
  • demo_06 引入图标库及创建选项卡组件

    img:

     tab:

    <template>
        <view class="tab">
            <scroll-view class="tab-scroll" scroll-x>
                <view class="tab-scroll_box">
                    <view v-for="(item,index) in list" :key="index" class="tab-scroll_item">{{item.name}}</view>
                </view>
            </scroll-view>
            <view class="tab-icons">
                <uni-icons type="gear" size="26" color="#666"></uni-icons>
            </view>
        </view>
    </template>

    <script>
        export default {
            data() {
                return {
                    list: [{
                            name: 'uni-app'
                        },
                        {
                            name: 'vue'
                        },
                        {
                            name: 'html'
                        },
                        {
                            name: 'javascript'
                        },
                        {
                            name: 'jquery'
                        },
                        {
                            name: 'ajax'
                        },
                        {
                            name: 'react'
                        },
                        {
                            name: 'css3'
                        }
                    ]
                };
            }
        }
    </script>

    <style lang="scss">
        .tab {
            display: flex;
             100%;
            border-bottom: 1px #f5f5f5 solid;
            background-color: #fff;
            box-sizing: border-box;

            .tab-scroll {
                flex: 1;
                overflow: hidden;
                box-sizing: border-box;

                .tab-scroll_box {
                    display: flex;
                    align-items: center;
                    flex-wrap: nowrap;
                    height: 45px;
                    box-sizing: border-box;

                    .tab-scroll_item {
                        flex-shrink: 0;
                        padding: 0 10px;
                        color: #333;
                        font-size: 14px;
                    }
                }
            }

            .tab-icons {
                position: relative;
                display: flex;
                justify-content: center;
                align-items: center;
                 45px;

                &::after {
                    content: '';
                    position: absolute;
                    top: 12px;
                    bottom: 12px;
                    left: 0;
                     1px;
                    background-color: #ddd;
                }
            }
        }
    </style>
  • 相关阅读:
    leetcode 1140. Stone Game II
    主席树
    Codeforces Round #442 (Div. 2) E Danil and a Part-time Job (dfs序加上一个线段树区间修改查询)
    UVALive 3942 Remember the Word
    UVA 11235 Frequent values (RMQ )
    CodeForces
    hdu 2955 Robberies (01背包好题)
    hdu 1054 Strategic Game (简单树形DP)
    hdu 5532 Almost Sorted Array (水题)
    hdu 2089 不要62 (数位dp基础题)
  • 原文地址:https://www.cnblogs.com/luwei0915/p/13343155.html
Copyright © 2011-2022 走看看