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>
  • 相关阅读:
    codeforces 455B A Lot of Games(博弈,字典树)
    HDU 4825 Xor Sum(二进制的字典树,数组模拟)
    hdu 1800 Flying to the Mars(简单模拟,string,字符串)
    codeforces 425A Sereja and Swaps(模拟,vector,枚举区间)
    codeforces 425B Sereja and Table(状态压缩,也可以数组模拟)
    HDU 4148 Length of S(n)(字符串)
    codeforces 439D Devu and Partitioning of the Array(有深度的模拟)
    浅谈sass
    京东楼层案例思维逻辑分析
    浅谈localStorage和sessionStorage
  • 原文地址:https://www.cnblogs.com/luwei0915/p/13343155.html
Copyright © 2011-2022 走看看