收藏
回答

ios更新到18.3.2后出现色块残留的问题?

框架类型 问题类型 终端类型 微信版本 基础库版本
小程序 Bug 微信iOS客户端 8.0.56 3.7.11

代码片段已提供,代码是用uniapp写的(新建一个普通项目,把代码粘贴到index.vue就能跑起来),代码片段是从现网小程序的代码中截取的,所以代码比较长。

我是做课表小程序的,近期有多位用户反馈课表有色块残留,他们的共同特点就是ios版本是18.3.2,我将我的平板更新到18.3.2后也能复现,安卓手机和开发者工具没有这个问题。

复现步骤:

运行代码片段,随机点击屏幕的多个点位

预期结果:

点击后,区域出现一个矩形格子,在点击其它地方后,上一个格子应该消失

实际结果:

安卓、开发者工具:正常

ios: 格子未消失


<template> <view class="bg-gradual-blue"> <scroll-view scroll-y class="DrawerPage" :class="modalName=='viewModal'?'show':''"> <!-- 课表页面 --> <view> <view class=""> <view style="position: relative;"> <view class="kcb-start"> <view v-for="(items,index1) in usualCourses[week-1]" :key="index1" style="margin-top: 0.2 vh;"> <view v-for="(item,index) in items" :key="index"> <view v-if="item.show" @longpress="longPressCourse(week-1,index1,index)" @click="clickCourse(week-1,index1,index)" class="kcb-item" :class="[item.not_this_week?'notweek':'', item.id == 0 ? 'transparent' : '', item.id == 1 ? 'add' : '']" :style="{ marginLeft:(item.day-1) * (courseWidth+6) + 'rpx', marginTop:(item.period-1) * (courseHeight+0.1) + 'vh', width:courseWidth + 'rpx', height:(item.length * courseHeight) +'vh', backgroundColor:colorArrays[item.cid%colorArrays.length], backgroundImage: 'linear-gradient(' + item.backgroundImage.angle + 'deg, ' + item.backgroundImage.color1 + ', ' + item.backgroundImage.color2 + ')', opacity:item.opacity }"> <view v-if="item.id == 1">+</view> </view> </view> </view> </view> </view> </view> </view> <!-- end --> </scroll-view> </view> </template> <script> export default { data() { return { top: 56, courseTimeIndex: 0, date: '', //课表显示周数 week: 1, topHeight: 3, courseHeight: 6.95, courseWidth: 92, showUsualCourseDialog: false, showPracticeCourseDialog: false, selectedCourseIndex: 0, usualCourses: [], practiceCourses: [], weekTable: ['一', '二', '三', '四', '五', '六', '日'], timeTable: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], colorArrays: ['#FF7500', '#ef5b9c', '#f15b6c', '#f26522', '#a5673f', '#8552a1', '#7fb80e', '#65c294', '#33a3dc', '#789262', '#8d4bbb', '#ff0097', '#725e82', '#D1BA74', '#78cdd1' ], //状态栏相关 StatusBar: this.StatusBar, }; }, methods: { clickCourse(week, day, index) { var course = this.usualCourses[week][day][index] //!!! if (course.id === 0) { for (var i = 0; i < 25; i++) { for (var j = 0; j < 7; j++) { for (var k = 0; k < this.usualCourses[i][j].length; k++) { if (this.usualCourses[i][j][k].id === 1) { this.usualCourses[i][j][k].id = 0 } } } } course.id = 1 return } if (course.id === 1) { uni.navigateTo({ url: './add?week=' + course.week + '&day=' + course.day + '&weekily=' + course.period + '&length=' + course.length }) return } }, initData(){ const t = { cid: 0, day: 0, id: 0, length: 2, name: "", not_this_week: false, opacity: 0.8, overlap: false, // transparent: true, period: 0, priority: 10, room: "", show: true, teacher: "", week: "", weekily: "", weeks: [] } var detail=[] for (let i = 0; i < 25; i++) { detail[i]=[] for (let j = 0; j < 7; j++) { detail[i][j]=[] for (let k = 0; k < 6; k++) { t.week = (i + 1).toString() + '周' t.day = j + 1 t.period = k * 2 + 1 t.weeks.pop() t.weeks.push(i + 1) detail[i][j].push(JSON.parse(JSON.stringify(t))) } } } console.log(detail) this.usualCourses=detail } }, onLoad(res) { this.initData() }, } </script> <style> .table-switch::before { content: ''; } .table-switch::after { content: ''; } .finish-title { padding: 10rpx; color: #000000; font-size: 30rpx; font-weight: 500; } .add { font-family: 'icomoon'; background-color: #DCDCDC !important; font-size: 50rpx; } .transparent { opacity: 0 !important; } .notweek { background-color: #8799a3 !important; } page { background-image: var(--gradualBlue); width: 60vw; overflow: hidden; } .topNav { width: 100vw; height: 100vh; z-index: -11111; position: absolute; background-color: #333333; } /* 未打开前的页面 */ .DrawerPage { position: fixed; width: 100vw; height: 100vh; left: 0vw; background-color: #F0F0F0; transition: all 0.4s; } .DrawerPage.show { transform: scale(0.9, 0.9); left: 60vw; box-shadow: 0 0 60upx rgba(0, 0, 0, 0.2); transform-origin: 0; } /* 菜单部分 */ .DrawerWindow { position: absolute; width: 60vw; height: 100vh; left: 0; top: 0; transform: scale(0.9, 0.9) translateX(-100%); opacity: 0; pointer-events: none; transition: all 0.4s; padding-top: 100upx; background-color: #333333; } .DrawerWindow.show { transform: scale(1, 1) translateX(0%); opacity: 1; pointer-events: all; } /* 遮罩层 */ .DrawerClose { position: absolute; width: 40vw; height: 100vh; right: 0; top: 0; color: transparent; padding-bottom: 30upx; display: flex; align-items: flex-end; justify-content: center; background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.6)); letter-spacing: 5px; font-size: 50upx; opacity: 0; pointer-events: none; transition: all 0.4s; } /* 右边原页面 */ .DrawerClose.show { opacity: 1; pointer-events: all; width: 40vw; color: #333333; } .DrawerPage .cu-bar.tabbar .action button.cuIcon { width: 64upx; height: 64upx; line-height: 64upx; margin: 0; display: inline-block; } .DrawerPage .cu-bar.tabbar .action .cu-avatar { margin: 0; } .DrawerPage .nav { flex: 1; } .DrawerPage .nav .cu-item.cur { border-bottom: 0; position: relative; } .DrawerPage .nav .cu-item.cur::after { content: ""; width: 10upx; height: 10upx; background-color: currentColor; position: absolute; bottom: 10upx; border-radius: 0upx; left: 0; right: 0; margin: auto; } .DrawerPage .cu-bar.tabbar .action { flex: initial; } .top { display: flex; flex-direction: row; position: absolute; width: 92rpx; height: 5vh; /* margin-left: 6rpx; */ border-radius: 8rpx; } .top-color { background-color: #D6D5B7; color: #A9A9A9; } .top-today { background-color: #F0F8FF; color: #87CEFA; } .top-text { width: 95rpx; text-align: center; } .topleft { display: flex; flex-direction: row; background-color: #d2e6b3; color: #7cba23; width: 65rpx; height: 5vh; border-radius: 12rpx; } .left-color { background-color: #DCDCDC; color: #A9A9A9; } .left { display: flex; flex-direction: row; /* background-color: #d2e6b3; color: #7cba23; */ width: 65rpx; height: 6.95vh; /* margin-left: 5rpx; */ margin-top: 0.1vh; border-radius: 8rpx; } .kcb-start { position: absolute; left: 71rpx; top: 5.1vh; } .course-table { border-radius: 12rpx; height: 100%; } .left-table { width: 102 rpx; height: 100%; } .course-table-content { height: 100%; } .main { display: flex; position: relative; } .flex-item { width: 92rpx; height: 200rpx; } .kcb-item { position: absolute; justify-content: center; display: flex; align-items: center; border-radius: 12rpx; overflow: hidden; } </style>
回答关注问题邀请回答
收藏

1 个回答

登录 后发表内容