uni-app的app模式，picker-view不显示问题

最新推荐文章于 2025-02-22 09:45:22 发布

w001yy

最新推荐文章于 2025-02-22 09:45:22 发布

阅读量3.6k

点赞数

分类专栏：前端 uni-app

本文链接：https://blog.youkuaiyun.com/w001yy/article/details/111470929

版权

前端同时被 2 个专栏收录

16 篇文章

订阅专栏

uni-app

4 篇文章

订阅专栏

本文介绍如何为 uni-app 中的滑动选择器（picker-view）进行样式定制，包括设置背景颜色、高度及自定义字体样式等，以实现更符合应用需求的设计效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

废话不说。直接上解决方法。

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: 300upx;
   margin-top:20upx;
}

##picker-view-column，可能还需要添加下面的样式

.item {
	line-height: 100upx;
	text-align: center;
 }

view代码

<picker-view :value="value" class="picker-content" @pickstart="bindpickstartFun" @change="bindChangeFun" @pickend="bindpickendFun" :indicator-style="indicatorStyle" :mask-style="maskStyle">
			<picker-view-column>
				<view  v-for="(item, index) in columnsData" :key="index">
					<view v-for="(itemIn, index2) in item" :key="index2" class="picker-line">
						<block v-if="tempValue == index">
							<text class="line1" :style="chooseTextStyle">{{isUseKeywordOfShow?itemIn[keyWordsOfShow]:itemIn}}</text>
						</block>
						<block v-else>
							<text class="line1" :style="chooseItemTextStyle">{{isUseKeywordOfShow?itemIn[keyWordsOfShow]:itemIn}}</text>
						</block>
					</view>
				</view>
			</picker-view-column>
		</picker-view>