//组件代码 <template>     <!-- <cover-view class="tabbar savepadding" :style="{'padding-bottom': paddingBottomHeight + 'rpx'}"> -->     <cover-view class="tabbar">         <cover-view class="tabbar-item" v-for="(item, index) in list"  :key="index"  @click="tabbarChange(item)">             <cover-image class="item-img" :src="item.icon_a" v-if="current == index"></cover-image>             <cover-image class="item-img" :src="item.icon" v-else></cover-image>             <cover-view class="item-name" :class="{'tabbarActive': current == index}" v-if="item.text">{{item.text}}</cover-view>         </cover-view>     </cover-view> </template> <script> export default{     props:{         current: {             type: Number,             default:0         },     },     created() {         let that = this;         uni.getSystemInfo({             success: function (res) {                 let model = ['X', 'XR', 'XS', '11', '12', '13', '14', '15'];                 model.forEach(item => {                     //适配iphoneX以上的底部，给tabbar一定高度的padding-bottom                     if(res.model.indexOf(item) != -1 && res.model.indexOf('iPhone') != -1) {                         that.paddingBottomHeight = 40;                     }                 })             }         });     },     data(){         return {             paddingBottomHeight: 0,  //苹果X以上手机底部适配高度               list: [                 {                     path: "/my_package/mySearch/index",                     text: "查件",                     icon: "../../static/waybillDetail/searchNoSelect.png",                     icon_a: "../../static/waybillDetail/searchSelect.png",                     id:0                 },                 {                     path: "/my_package/mine/mine",                     text: "我的",                     icon: "../../static/waybillDetail/mineNoSelect.png",                     icon_a: "../../static/waybillDetail/mineSelect.png",                     id:1                 }]         }     },     methods: {         tabbarChange(e) {             if (e.id===this.current) {                 return             }else{                 setTimeout(()=>{                     uni.redirectTo({url:e.path})                 },100)             }         }     }, } </script> <style lang="scss" scoped> page{     position: fixed;     height: 100%;     overflow-y: hidden;     overflow-x: hidden;     top: 0;     left: 0;     right: 0;     bottom: 0; } .tabbarActive{    color: #0a98ff !important; } .savepadding{     padding-bottom: constant(safe-area-inset-bottom);       padding-bottom: env(safe-area-inset-bottom);     box-sizing: content-box; } .tabbar{     // z-index: 10;     // display: table;     // position:-webkit-sticky;     // position: sticky;     position: fixed;     bottom: 0;     left: 0;     transform: translate3d(0,0,0);     display: flex;     padding-bottom: env(safe-area-inset-bottom);     justify-content: space-around;     // table-layout: fixed;     width: 100%;     height: 100rpx;     background-color: #ffffff;     .tabbar-item{         box-sizing: border-box;         flex: 1;         flex-direction: column;         align-items: center;         justify-content: center;         height: 100rpx;         .item-img{             margin-bottom: 4rpx;             width: 46rpx;             height: 46rpx;         }         .item-name{             font-size: 26rpx;             color: #A3A3A3;         }     } } </style> //页面直接使用 <my-tabar :current="0" /> [图片][图片]