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>
  • 相关阅读:
    [USACO09Open] Tower of Hay 干草塔
    [HNOI2004]打鼹鼠
    BZOJ1222[HNOI 2001]产品加工
    BZOJ1270[BJWC2008]雷涛的小猫
    NOIP2018出征策
    解析·NOIP·冷门 CLZ最小环
    CCF-NOIP-2018 提高组(复赛) 模拟试题(九)(2018 CSYZ长沙一中)
    [脚本无敌1]图片批量处理(matlab)
    用Matlab解《2013年数据建模比赛》图像碎片拼接题
    火灾检测-fire,fire
  • 原文地址:https://www.cnblogs.com/luwei0915/p/13343155.html
Copyright © 2011-2022 走看看