影片直播網站原始碼，uni-app左右平分九宮格樣式

影片直播網站原始碼，uni-app左右平分九宮格樣式

1.template：佈局

<template>
    <view class="content">
        <view class="cp-xiangmu" v-for="item in imgs">
            <image :src="item.imgurl" class='cp_tupian' mode='widthFix'></image>
            <text class='cp-biaoti'>{{item.title}}</text>
        </view>
    </view>
</template>

2.最重要的是style樣式

<style>
    .cp_tupian {
        width: 100%;
    }
    .cp-biaoti {
        font-size: 14px;
        color: gray;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .cp-xiangmu {
        width: 50%;
        display: flex;
        padding: 3px;
        box-sizing: border-box;
        flex-direction: column;
    }
    .content {
        display: flex;
        flex-wrap: wrap;
    }
</style>

 以上就是 影片直播網站原始碼，uni-app左右平分九宮格樣式，更多內容歡迎關注之後的文章