<template>
<view class="content">
<picker-view class="date_picker_view" :indicator-style="indicatorStyle" :value="values" @change="bindChange">
<picker-view-column class="date">
<span :style="{lineHeight:lineHeight+'px',height:lineHeight+'px'}" v-for="(item, index) in years" :key="index" class="date_picker_view_item" style="font-size: 30rpx;height: 64px;" >{{ item }}年</span>
</picker-view-column >
</picker-view>
</view> </template>
<script>
import gppDatePicker from '../../components/gpp-datePicker/gpp-datePicker.vue';
export default {
components: {
gppDatePicker
},
data() {
return {
indicatorStyle: height: ${Math.round(uni.getSystemInfoSync().screenWidth / (750 / 100))}px;, //pickerview样式
startDate: '1949-01-01',
endDate: '2122-09-20',
pickerDate: '2020-11-25',
years: [],
values: [],
lineHeight:Math.round(uni.getSystemInfoSync().screenWidth / (750 / 100))
};
},
onLoad() {
for (var i = 1949; i < 2000; i++) {
this.years.push(i);
}
console.info(this.lineHeight)
},
methods: {
onCancel(e) {
console.log(e);
},
onConfirm(e) {
this.pickerDate = e.dateValue;
},
bindChange() {}
}
};
</script>
<style>
.date_picker_view_item {
align-items: center;
justify-content: center;
text-align: center;
font-size: 30rpx;
color: #333333;
margin: 0!important;
padding: 0!important; }
.span{
margin: 0;
padding: 0;
}
.date{
padding:0;
margin: 0;
}
.date_picker_view {
width: 150rpx;
height: 600rpx;
} .content {
display: flex;
align-items: center;
justify-content: center;
}
.text-area {
display: flex;
justify-content: center;
align-items: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
</style>
7***@qq.com (作者)
我就是用官方示例改的，只不过我用的是nvue
2020-12-23 17:40
DCloud_UNI_Anne
回复 7***@qq.com: 目前nvue页面，picker-view-column标签里面用text标签，需要自己写下高和文字居中。
2020-12-23 18:11
7***@qq.com (作者)
回复 DCloud_UNI_Anne: 是用的text标签，文字居中用了行高=高度 text-align: center;
2020-12-24 09:38
ddpapa
回复 7***@qq.com: 大佬，解决了吗，我也遇到了问题，使用官方的例子，在nvue里面，第一列显示有点错乱，就是文字没有居中，有点偏下
2021-10-15 11:44