uni-app uni-popup 弹窗没有相对手机窗口弹起问题

// 调用页面
<template>
<KXDateTime @rundata=‘kxdatetimeend’ :end=“endDate” :default="‘date’"></KXDateTime>

</template> // ------------------

// 组件内容
<template>
<view name='KXDateTime'>
<view :class=“dir == ‘right’ ? ‘list-row change dir-right’ : ‘list-row change’” @click=“open”>
<view class="hint">
{{changeDate == 0 ? ‘请选择’ : changeDate}}
</view>
<view class="iconfont icon-xiangyou1"></view>
</view>
<uni-popup ref="popup" type="bottom">
<view class="but">
<text @click=“close”>取消</text>
<text @click=“ok”>确定</text>
</view>
<picker-view v-if=“visible” :indicator-style=“indicatorStyle” :value=“value” @change=“bindChange”>
<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-column>
<view class="item" v-for="(item,index) in hours" :key="index">{{item}}时</view>
</picker-view-column>
<picker-view-column>
<view class="item" v-for="(item,index) in mins" :key="index">{{item}}分</view>
</picker-view-column>
</picker-view>

        <picker-view v-else :indicator-style="indicatorStyle" :value="value" @change="bindChange">  
            <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-column>  
                <view class="item" v-for="(item,index) in hours_num" :key="index">{{item}}号</view>  
            </picker-view-column>  
        </picker-view>  

    </uni-popup>  
</view>  

</template> <script> import uniPopup from '../uni-popup/uni-popup.vue' export default { name: 'KXDateTime', components: { uniPopup }, props: { isVisible: { type: Boolean, default: true }, dir: '', date: '', start: '', end: '', default: '', placeholder: '' }, data() { let defaultvalue = this.default; let value = [9999, 99, 99, 0, 0]; if (defaultvalue == 'end') { value = [9999, 99, 99, 0, 0] } else if (defaultvalue == 'start') { value = [0, 0, 0, 0, 0] } return { isChange: false, flang: true, changeDate: 0, title: 'picker-view', years: [], year: '', months: [], month: '', days: [], day: '', hours: [], hour: '', mins: [], min: '', hour_num: '', hours_num: [], value, valueStr: '', visible: true, strYMDHM: '', indicatorStyle: `height: 80rpx;`, trimer: null, } }, destroyed() { this.flang = true; }, methods: { slep(slep) { return new Promise((resolve, reject) => { setTimeout(() => { resolve(true) }, slep) }) }, async toData() { console.log('change') if (this.default == 'date') { let tempDate = new Date(); let y = tempDate.getFullYear(); let m = tempDate.getMonth(); let d = tempDate.getDate(); let temp = this.years.findIndex(item => item == y); let temp2 = this.months.findIndex(item => item == m); let temp3 = this.days.findIndex(item => item == d); this.value = [temp, temp2 + 1, temp3, 0, 0]; this.bindChange({ detail: { value: [temp, temp2 + 1, temp3, 0, 0] } }) if(temp3 == -1 || temp == -1 || temp2 == -1) { await this.slep(100); this.toData(); } } }, open() { let start; if (this.start) { start = this.start.replace(/-/g, "/") start = new Date(start); } else { start = new Date(0); } let starty = start.getFullYear(); //开始年份 let end; if (this.end) { end = this.end.replace(/-/g, "/") end = new Date(end); } else { end = new Date(); } if (start > end) { uni.showToast({ title: '时间范围错误！', icon: 'none', duration: 2000 }); return false } this.$forceUpdate(); if (this.valueStr) { this.value = JSON.parse(this.valueStr); setTimeout(() => { this.amend(); this.toData(); }, 100) this.$refs.popup.open() } else { setTimeout(() => { this.amend(); this.toData(); }, 100) this.$refs.popup.open() } let temp = []; for (var i = 0, len = 100; i <= len; i++) { temp.push(i) } this.hours_num = temp; }, close() { this.$refs.popup.close() }, ok() { let day = this.day < 10 ? '0' + this.day : this.day, month = this.month < 10 ? '0' + this.month : this.month, hour = this.hour < 10 ? '0' + this.hour : this.hour, min = this.min < 10 ? '0' + this.min : this.min if (!this.isVisible) { hour = this.hour_num < 10 ? '0' + this.hour_num : this.hour_num var data_ = this.year + ',' + month + ',' + day + ',' + hour this.changeDate = this.isChange ? data_ : this.end; this.$emit("update:number", data_) this.$refs.popup.close() return false; } let data = this.isChange ? this.year + '-' + month + '-' + day + ' ' + hour + ':' + min : this.end; this.changeDate = this.isChange ? data : this.end; this.$emit("rundata", data) this.$emit("update:model", data) this.$emit("update:model_ss", data + ':00') this.$refs.popup.close() }, bindChange: function(e) { this.isChange = true; let val = e.detail.value this.valueStr = JSON.stringify(val); this.year = this.years[val[0]] this.month = this.months[val[1]] this.day = this.days[val[2]] this.hour = this.hours[val[3]]; this.hour_num = this.hours_num[val[3]]; this.min = this.mins[val[4]] }, //数据校正 amend() { if (this.valueStr) { let val = JSON.parse(this.valueStr); this.year = this.years[val[0]] this.month = this.months[val[1]] this.day = this.days[val[2]] this.hour = this.hours[val[3]] this.min = this.mins[val[4]] } let start; if (this.start) { start = this.start.replace(/-/g, "/") start = new Date(start); } else { start = new Date(0); } let starty = start.getFullYear(); //开始年份 let startm = start.getMonth() + 1; //开始月份 let startd = start.getDate(); //开始天 let starth = start.getHours(); //开始小时 let startmin = start.getMinutes(); //开始分钟 let end; if (this.end) { end = this.end.replace(/-/g, "/") end = new Date(end); } else { end = new Date(); } let endy = end.getFullYear(); //终止年份 let endm = end.getMonth() + 1; //终止月份 let endd = end.getDate(); //终止天 let endh = end.getHours(); //终止小时 let endmin = end.getMinutes(); //终止分钟 //如果选择起始年份 let years = [], months = [], days = [], hours = [], mins = []; let month31 = [1, 3, 5, 7, 8, 10, 12], month30 = [4, 6, 9, 11]; let daysNum; for (let i = starty; i <= endy; i++) { years.push(i) } if (month31.indexOf(this.month) > -1) { daysNum = 31 } else if (month30.indexOf(this.month) > -1) { daysNum = 30 } else { if (this.year % 4 == 0) { daysNum = 29 } else { daysNum = 28 } } let defaultvalue = this.default; let defaulty = endy, defaultm = endm, defaultd = endd, defaulth = endh, defaultmin = endmin; if (defaultvalue == 'end') { defaulty = endy; defaultm = endm; defaultd = endd; defaulth = endh; defaultmin = endmin; } else if (defaultvalue == 'start') { defaulty = starty; defaultm = startm; defaultd = startd; defaulth = starth; defaultmin = startmin; } //当数值异常是设施默认 if (!this.year) { this.year = defaulty } if (!this.month) { this.month = defaultm } if (!this.day) { this.day = defaultd } if (!this.hour && this.hour !== 0) { this.hour = defaulth } if (!this.min && this.min !== 0) { this.min = defaultmin } //判断年份是在起始年 if (this.year == starty) { //判断起始年份和终止年份是否相等 if (starty == endy) { //如果等，那么月份取两者中间 for (let i = startm; i <= endm; i++) { months.push(i) } //判断月份是在起始月 if (this.month == startm) { //判断起始月和终止月是否相等 if (startm == endm) { //如果等，那么天数取两者中间 for (let i = startd; i <= endd; i++) { days.push(i) } //判断日是在起始日 if (this.day == startd) { //判断起始ri和终止日是否相等 if (startd == endd) { //如果等，那么小时取两者中间 for (let i = starth; i <= endh; i++) { hours.push(i) } //判断小时是在起始小时 if (this.hour == starth) { //判断起始和终止是否相等 if (starth == endh) { //如果等，那么分钟取两者中间 for (let i = startmin; i <= endmin; i++) { mins.push(i) } } else { //如果不等，到59 for (let i = startmin; i <= 59; i++) { mins.push(i) } } } else { //判断小时是否在截止小时 if (this.hour == endh) { //终止小时取到截止分钟 for (let i = 0; i <= endmin; i++) { mins.push(i) } } } } else { //如果不等，到23小时 for (let i = starth; i <= 23; i++) { hours.push(i) } //判断小时是在起始小时 if (this.hour == starth) { for (let i = startmin; i <= 59; i++) { mins.push(i) } } } } else { //判断日是否在截止日 if (this.day == endd) { //终止日取到截止小时 for (let i = 0; i <= endh; i++) { hours.push(i) } //判断小时是否在截止小时 if (this.hour == endh) { //终止小时取到截止分钟 for (let i = 0; i <= endmin; i++) { mins.push(i) } } } } } else { //如果不等， for (let i = startd; i <= daysNum; i++) { days.push(i) } if (this.day == startd) { for (let i = starth; i <= 23; i++) { hours.push(i) } //判断小时是在起始小时 if (this.hour == starth) { for (let i = startmin; i <= 59; i++) { mins.push(i) } } } } } else { //判断月份是在终止月 if (this.month == endm) { //终止月取到截止天 for (let i = 1; i <= endd; i++) { days.push(i) } //判断日是否在截止日 if (this.day == endd) { //终止日取到截止小时 for (let i = 0; i <= endh; i++) { hours.push(i) } //判断小时是否在截止小时 if (this.hour == endh) { //终止小时取到截止分钟 for (let i = 0; i <= endmin; i++) { mins.push(i) } } } } } } else { //如果不等，去开始到12月份 for (let i = startm; i <= 12; i++) { months.push(i) } //判断月份是在起始月 if (this.month == startm) { //是，取天数之后 for (let i = startd; i <= daysNum; i++) { days.push(i) } //判断日是在起始日 if (this.day == startd) { //是，qu起始小时之后 for (let i = starth; i <= 23; i++) { hours.push(i) } //判断小时是在起始小时 if (this.hour == starth) { //是，qu起始分钟之后 for (let i = startmin; i <= 59; i++) { mins.push(i) } } } } } } else if (this.year == endy) { //年份中终止年 //月份取到终止月 for (let i = 1; i <= endm; i++) { months.push(i) } //判断月份是在终止月 if (this.month == endm) { //终止月取到截止天 for (let i = 1; i <= endd; i++) { days.push(i) } //判断日是否在截止日 if (this.day == endd) { //终止日取到截止小时 for (let i = 0; i <= endh; i++) { hours.push(i) } //判断小时是否在截止小时 if (this.hour == endh) { //终止小时取到截止分钟 for (let i = 0; i <= endmin; i++) { mins.push(i) } } } } } else { for (let i = 1; i <= 12; i++) { months.push(i) } for (let i = 1; i <= daysNum; i++) { days.push(i) } for (let i = 0; i <= 23; i++) { hours.push(i) } for (let i = 0; i <= 59; i++) { mins.push(i) } } if (months.length == 0) { for (let i = 1; i <= 12; i++) { months.push(i) } } if (days.length == 0) { for (let i = 1; i <= daysNum; i++) { days.push(i) } } if (hours.length == 0) { for (let i = 0; i <= 23; i++) { hours.push(i) } } if (mins.length == 0) { for (let i = 0; i <= 59; i++) { mins.push(i) } } this.years = years; this.months = months; this.days = days; this.hours = hours; this.mins = mins; this.$forceUpdate(); } }, watch: { isVisible: { handler(val) { this.visible = val; }, immediate: true }, year(val) { console.log(val) this.amend(); }, month() { this.amend(); }, day() { this.amend(); }, hour() { this.amend(); }, min() { this.amend(); // if(this.flang){ // this.toData(); // } // this.flang = false; }, years(n, m) { if (n.toString() != m.toString()) { this.amend(); } }, months(n, m) { if (n.toString() != m.toString()) { this.amend(); } }, days(n, m) { if (n.toString() != m.toString()) { this.amend(); } }, hours(n, m) { if (n.toString() != m.toString()) { this.amend(); } }, mins(n, m) { if (n.toString() != m.toString()) { this.amend(); } } } } </script> <style lang="scss" scoped> text { display: inline-block; color: $uni-text-color-grey; } .item { display: flex; align-items: center; justify-content: center; } .change { display: flex; justify-content: space-between; margin-top: 24rpx; .hint { font-size: 28rpx; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #8F9399; line-height: 40rpx; } .iconfont { display: flex; align-items: center; color: #606265; font-size: 26rpx; } &.dir-right { flex: 1; margin-top: 0; justify-content: flex-end; } } .but { background: #fff; height: 80rpx; line-height: 80rpx; padding: 0 30rpx; border-bottom: 1px solid #f0f0f0; text-align: left; text { display: inline-block; } text:last-child { float: right; color: $uni-color-primary; } } picker-view { width: 100%; background: #fff; height: 600rpx; text-align: center; } </style>