使用flex布局实现uni-app页面底部固定下载栏
效果如下:
代码示例:
<template>
<view class="download-tag">
<image src="http://xxx.com/logo.png" class="download-img"></image>
<view class="download-text">
<text>立即下载APP 获取更多内容</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
onLoad() {
},
}
</script>
<style>
/* 下载栏 */
.download-tag{
display:flex;
align-items: center;
background: #7e7e7e;
position:fixed;
left:0;
bottom:0;
right:0;
}
.download-img{
width:10%;
height:80rpx;
padding: 20rpx;
}
.download-text{
font-size:26rpx;
color:white;
}
</style>