uni-app picker-view picker-view-column简单使用

效果图

image.png

<!-- 商品分类弹出框 -->
        <uni-popup ref="popup" type="bottom">
            <view class="product-type-area">
                <view class="popup-title">商品分类</view>
                <picker-view class="picker-area" :indicator-style="indicatorStyle">
                    <picker-view-column>
                        <template v-for="(item, index) in 4">
                            <view class="picker-item-area" :key="index">{{index + 1}}</view>
                        </template>
                    </picker-view-column>
                </picker-view>
            </view>
        </uni-popup>

css

.picker-item-area{
        width: 100%;
        height: 100rpx;
        line-height: 100rpx;
        text-align: center;
        font-size: 30prx;
        font-weight: 500;
        color: #666666;
    }
    
    .picker-area{
        width: 100%;
        height: 400rpx;
    }
    
    .popup-title{
        text-align: center;
        padding: 40rpx 30rpx;
        font-size: 36rpx;
        font-weight: 500;
        color: #333333;
    }
    
    .product-type-area{
        width: 100%;
        background: #FFFFFF;
        border-top-left-radius: 20rpx;
        border-top-right-radius: 20rpx;
    }