uni-app picker-view不显示问题

逆风方向 · 发表于 2021-1-4 14:49:00

这样的代码在uni-app中不显示，刚开始以为是框架问题导致不能使用，

<picker-view v-show="true" :value="value" @change="bindChange">
      <picker-view-column>
        <view class="item" v-for="item in toDayList" :key="item">
          {{ item }}
        </view>
      </picker-view-column>
      <picker-view-column>
        <view class="item" v-for="item in hours" :key="item">
          {{ item }}
        </view>
      </picker-view-column>
      <picker-view-column>
        <view class="item" v-for="item in minutes" :key="item">
          {{ item }}
        </view>
      </picker-view-column>
      <picker-view-column>
        <view class="item" v-for="item in seconds" :key="item">
          {{ item }}
        </view>
      </picker-view-column>
    </picker-view>

后来经过百度发现需要添加一些样式

uni-picker-view {
  display: block;
}
uni-picker-view .uni-picker-view-wrapper {
  display: flex;
  position: relative;
  overflow: hidden;
  height: 100%;
  background-color: white;
}
uni-picker-view[hidden] {
  display: none;
}
picker-view {
  width: 100%;
  // height: 600upx;
  height: 400rpx;
  margin-top: 20upx;
}
.item {
  line-height: 100upx;
  text-align: center;
}