seo网站推广优化,国内外网站建设比较,c++制作网页,南宁网站建设lilkj最近使用uniappvue3uview-plus开发微信小程序中#xff0c;使用uview-plus自定义底部导航栏tabbar时#xff0c;遇到修改默认样式不生效问题
使用传统的 ::v-deep、:deep、::v-deep#xff0c;或者style标签中去掉scoped也是无效的#xff0c;有好的方案欢迎交流#xff…最近使用uniappvue3uview-plus开发微信小程序中使用uview-plus自定义底部导航栏tabbar时遇到修改默认样式不生效问题
使用传统的 ::v-deep、:deep、::v-deep或者style标签中去掉scoped也是无效的有好的方案欢迎交流解决方案如下 script langts
export default {options: { styleIsolation: shared }
}
/scriptscript setup langts
import { ref } from vue;
import { storeToRefs } from pinia
import { useTabbarStore } from /storesconst tabbarStore useTabbarStore()
const { list, activeTab } storeToRefs(tabbarStore)const tabbarProps ref({value: activeTab,border: false,zIndex: 999,activeColor: #333,inactiveColor: #7A7E83,fixed: true,placeholder: true,safeAreaInsetBottom: true
})const handleChange (index: number) {tabbarStore.setActiveTab(index)uni.switchTab({url: list.value[index].pagePath})
}
/script
style langscss::v-deep .u-tabbar__content {border-top-left-radius: 46rpx;border-top-right-radius: 46rpx;box-shadow: 0px 0px 10rpx 4rpx rgba(0, 0, 0, 0.08);.u-tabbar__content__item-wrapper {height: 78rpx;}.u-tabbar-item__text {font-size: 22rpx;font-family: PingFang-SC;}}
/style
