pc上表现正常，移动端下面日期选择不到。最后调试发现与picker-view高度有关，高度100upx，展示一行，移动端也正常选择，高度200upx,展示2行，最后一行无法选择，高度300upx，展示3行最后两行数据无法选择，
!
!
代码：
<view class="popup-modal" v-show="popupShow" @click="changePopupStatus">
<view class="popup-body">
<view class="popup-title">
<view class="time-slot">
<view :class="['time-item start-time',{'active-time-item':showTime=='startTime'}]"
@click.stop="changeShowTime('startTime')">
{{startTime}}
</view>
<view class="time-slot-sign">至</view>
<view :class="['time-item end-time',{'active-time-item':showTime=='endTime'}]"
@click.stop="changeShowTime('endTime')">
{{endTime}}
</view>
</view>
<view class="iconfont icon-delete" @click.stop="resetSelectTime"></view>
</view>
<view class="popup-content" v-if="showTime=='startTime'">
<picker-view v-if="visible" :indicator-style="indicatorStyle" :value="startTimeValue" @change="bindChangeStart">
<picker-view-column>
<view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
</picker-view-column>
<picker-view-column>
<view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
</picker-view-column>
<picker-view-column>
<view class="item" v-for="(item,index) in days" :key="index">{{item}}日</view>
</picker-view-column>
</picker-view>
</view>
<view class="popup-content" v-if="showTime=='endTime'">
<picker-view v-if="visible" :indicator-style="indicatorStyle" :value="endTimeValue" @change="bindChangeEnd">
<picker-view-column>
<view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
</picker-view-column>
<picker-view-column>
<view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
</picker-view-column>
<picker-view-column>
<view class="item" v-for="(item,index) in days" :key="index">{{item}}日</view>
</picker-view-column>
</picker-view>
</view>
<view class="popup-footer">
<view class="btn submit-btn" @click.stop="submitTimeEvent">确定</view>
</view>
</view>
</view>相关样式：
.popup-modal{
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,.6);
transition: all ease-in 300ms;
.popup-body{
position: fixed;
bottom: 0;
width: 100%;
background: #fff;
.popup-title{
@include flex;
flex-direction: column;
align-items: flex-end;
box-sizing: border-box;
padding: 30upx;
.time-slot{
width: 100%;
@include flex;
justify-content: space-between;
font-size: 26upx;
color: #999;
.time-item{
width: 40%;
text-align: center;
box-sizing: border-box;
padding-bottom: 25upx;
border-bottom: 2upx solid #999999;
}
.active-time-item{
color: #303030;
border-bottom: 2upx solid #547EE2;
}
.time-slot-sign{
margin-bottom: 27upx;
}
}
.iconfont{
margin-top: 30upx;
color: #999;
}
}
.popup-content{
width: 100%;
min-height: 300upx;
picker-view{
// min-height: 300upx;
height: 300upx;
box-sizing: border-box;
padding: 0 30px;
.item{
text-align: center;
line-height: 100upx;
}
}
}
.popup-footer{
box-sizing: border-box;
padding: 30upx;
.btn{
@include flex;
justify-content: center;
width: 100%;
height: 98upx;
font-size: 36upx;
border-radius: 49upx;
}
.submit-btn{
background: #547EE2;
color: #fff;
}
}
}
}相关事件：
export default {
data() {
const date = new Date()
const years = []
const year = date.getFullYear()
const months = []
const month = date.getMonth() + 1
const days = []
const day = date.getDate()
for (let i = 1990; i <= date.getFullYear(); i++) {
years.push(i)
}
for (let i = 1; i <= 12; i++) {
months.push(i)
}
for (let i = 1; i <= 31; i++) {
days.push(i)
}
return {
years,
months,
days,
year,
month,
day,
startTimeValue: [years.length-1, month - 1, day - 1],
endTimeValue: [years.length-1,month - 1,day - 1],
popupShow: false,
visible: true,
showTime: "startTime", // 当前操作时间对象
indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth/(750/100))}px;`,
selectStartTime:'',
selectEndTime:'',
}
},
computed:{
startTime() {
let startVal = this.startTimeValue
return this.years[startVal[0]]+"-"+this.months[startVal[1]]+"-"+this.days[startVal[2]]
},
endTime() {
let startVal = this.startTimeValue
let endVal = this.endTimeValue
console.log(startVal,endVal)
if(endVal[0]>startVal[0]) { // 结束年份>开始年份 ok
return this.years[endVal[0]]+"-"+this.months[endVal[1]]+"-"+this.days[endVal[2]]
}else if(endVal[0] == startVal[0]) { // 结束年份 ==开始年份 比较月份
if(endVal[1] > startVal[1]) { // 结束月份>开始月份 ok
return this.years[endVal[0]]+"-"+this.months[endVal[1]]+"-"+this.days[endVal[2]]
}else if(endVal[1] == startVal[1]) { // 结束月份 == 开始月份 比较天
if(endVal[2] < startVal[2]) { // 结束天 < 开始天 直接归置为当前日期
this.endTimeValue=[this.years.length-1,this.month-1,this.day-1]
return this.year+"-"+this.month+"-"+this.day
}else{ // 结束天 >= 开始天 ok
return this.years[endVal[0]]+"-"+this.months[endVal[1]]+"-"+this.days[endVal[2]]
}
}else{ // 结束月份<开始月份 直接归置为当前日期
this.endTimeValue=[this.years.length-1,this.month-1,this.day-1]
return this.year+"-"+this.month+"-"+this.day
}
}else{ // 结束年份<开始年份 直接归置为当前日期
this.endTimeValue=[this.years.length-1,this.month-1,this.day-1]
return this.year+"-"+this.month+"-"+this.day
}
}
},
methods:{
changePopupStatus() { // 选择时间 popup状态
this.popupShow = !this.popupShow
},
// selectTime popup 事件
changeShowTime(type) { // 变更事件对象
this.showTime = type
},
bindChangeStart(e) { // 开始时间变更事件
this.startTimeValue = e.detail.value
},
bindChangeEnd(e) { // 结束时间变更事件
this.endTimeValue = e.detail.value
},
resetSelectTime() { // 重置选择时间
this.startTimeValue = this.endTimeValue= [(this.years.length - 1), (this.month - 1), (this.day - 1)]
this.selectStartTime = ""
this.selectEndTime = ""
this.changePopupStatus()
this.resetParamGetData()
},
}
}
1 个回复
1***@qq.com (作者) - 前端开发er
<iframe height=498 width=510 src='http://player.youku.com/embed/XNDI4Njk0MjY4OA==' frameborder=0 'allowfullscreen'></iframe>