uniapp吸底效果

html:

<view class="content aiMenuClass" :style="{paddingBottom:bottom + 'px'}">

.........

</view>

<view class="stickyBottom">
　　<view class="stickyContent"></view>

</view>

 

css:

.stickyBottom {
background-color: #FFFFFF;
width: 100%;
position: fixed; *****
right: 0px;
bottom: calc( var(--window-bottom)); ****
z-index: 9;
.stickyContent {
display: flex;
flex-wrap: wrap;
padding: 20rpx;
border-radius: 30rpx 30rpx 0px 0px;
box-shadow: 0px 0px 15rpx 0px rgba(0, 0, 0, 0.4);
}
}

 

js

onLoad:function(){
const query = uni.createSelectorQuery().in(this);
query
.select(".stickyBottom")
.boundingClientRect((data) => {
console.log(data)
this.bottom = data.height
})
.exec();
},