小程序同层渲染解决原生组件的层级最高的问题

因为在项目中需要用到map这个原生组件，但是在map上又要用到picker和scroll-view这些组件，利用cover-view实现不了这些效果，所以就想到了小程序提出的同层渲染，这是第一次使用，写个小例子记录一下








膳食与营养膳食与营养膳食…




膳食与营养膳食与营养膳食…




膳食与营养膳食与营养膳食…




膳食与营养膳食与营养膳食…


{{year}}年{{month}}月{{day}}日


{{item}}年


{{item}}月


{{item}}日



css部分
.scroll-wrap {
min-width: 100%;
height: 360rpx;
white-space: nowrap; /不可缺少/
}
.scroll-view-item {
width: 68%;
height: 340rpx;
display: inline-block;
border: 1rpx solid #000;
}
.scroll-view-item + .scroll-view-item {
margin-left: 16rpx;
}
::-webkit-scrollbar{
width: 0;
height: 0;
color: transparent;
}
.scroll-img-wrap {
width: 100%;
height: 280rpx;
overflow: hidden;
border-radius: 8rpx;
}
.scroll-title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
}
.scroll-major-img-wrap {
height: 280rpx;
}
.scroll-major-title {
margin: 16rpx 8rpx;
}

js部分
const date = new Date()
const years = []
const months = []
const days = []

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)
}
Page({
data: {
years: years,
year: date.getFullYear(),
months: months,
month: 2,
days: days,
day: 2,
value: [9999, 1, 1],
polyline: [{
points: [{
longitude: 113.3245211,
latitude: 23.10229
}, {
longitude: 113.324520,
latitude: 23.21229
}],
color: “#FF0000DD”,
width: 2,
dottedLine: true
}],
},
showDate:function(){
this.setData({
show:true
})
},
bindChange: function (e) {
const val = e.detail.value
this.setData({
year: this.data.years[val[0]],
month: this.data.months[val[1]],
day: this.data.days[val[2]]
})
},
error:function(e){
console.log(e,‘捕获错误’)
},
markertap(e) {
console.log(e.markerId)
},
controltap(e) {
console.log(e.controlId)
}
})

在以上分别嵌套了picker-view和scroll-view组件， 这个就是把非原生组件和原生组件通过定位的方式将其定位，通过z-idnex来控制层级，这样就实现了，避免被覆盖了，但是有些机型也是不兼容的，在项目中我为了更保险一点，所以写了两套代码用来处理在不兼容的机型上在原生组件上添加 bindrendererror=“error” 在捕获错误，然后进行处理即可