1***@qq.com
1***@qq.com
  • 发布:2023-08-22 18:12
  • 更新:2023-08-23 09:17
  • 阅读:225

【报Bug】view的::after 和::before不生效

分类:uni-app

产品分类: uniapp/H5

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: window10

HBuilderX类型: 正式

HBuilderX版本号: 3.8.12

浏览器平台: Edge

浏览器版本: 115.0.1901.203 (正式版本) (64 位)

项目创建方式: HBuilderX

示例代码:
<template>  
    <view class="tab-list-container">  
        <!-- 顶部 -->  
        <view class="tab-list">  
            <view @click="changeTab(1)" class="tab-item" :class='activeTab === 1 ? "active" : ""'>人气排行榜</view>  
            <view @click="changeTab(2)" class="tab-item" :class='activeTab === 2 ? "active" : ""'>为你找机</view>  
        </view>  
        <!-- 内容 -->  
        <view class="tab-content">  
            <view class="tab-1" v-show='activeTab === 1'>  
                <view>每天06:00更新</view>  
                <view v-for='(item, index ) in  tabGoodsList' :key='index'>  
                    <view class="goods-pic"></view>  
                    <view>挖机产品名称型号型号型号型号型号型号</view>  
                    <view class="info">  
                        <view>2013年</view>  
                        <view class="price">28.8万</view>  
                    </view>  
                </view>  
            </view>  

            <view class="tab-2" v-show='activeTab === 2'>  

            </view>  

        </view>  
    </view>  
</template>  

<script setup>  
    import {  
        ref  
    } from 'vue'  

    const tabGoodsList = ref([])  
    const activeTab = ref(1)  

    const changeTab = (value) => {  
        activeTab.value = value  
    }  
</script>  

<style lang="scss" scoped>  
    .tab-list-container {  
        background-color: #fff;  
        margin: 24rpx 0;  
        padding-left: 24rpx;  
        padding-right: 24rpx;  
    }  

    .tab-list {  
        display: flex;  
        font-size: 26rpx;  
        color: #004;  
        column-gap: 24rpx;  

        .tab-item {  
            position: relative;  
            padding-bottom: 20rpx;  
        }  

    }  
    // 这里没有生效  
    .tab-item ::after {  
        position: absolute;  
        left: 0;  
        bottom: 0;  
        background-color: red;  
        height: 4rpx;  
        width: 100%;  
    }  
</style>

操作步骤:

创建一个页面,直接运行上面的代码,审查元素即可

预期结果:

期望有伪元素出现

实际结果:

实际没有。

bug描述:

view标签增加 ::after和 ::before无效

不管是运行为H5还是小程序,都没有添加上

新项目,使用的HBuilder创建的 uni-app应用。 选择的是 vue3版本

2023-08-22 18:12 负责人:无 分享
已邀请:
underfined

underfined

应该是少一行代码

.tab-item ::after {    
        content:'',  

        position: absolute;    
        left: 0;    
        bottom: 0;    
        background-color: red;    
        height: 4rpx;    
        width: 100%;    
    } 
  • 1***@qq.com (作者)

    感谢 感谢, 我中午睡醒后,发现字体文件是可用的,一对比,是 content 没有写导致的。 我的问题

    2023-08-23 14:08

1***@qq.com

1***@qq.com (作者) - 测试

希望实现的效果是

HBuilderX版本号: 使用的是 截至2023-08-22 18:13 最新的版本 3.8.12.20230817

2***@qq.com

2***@qq.com

我使用都有效果呀,你宽度写死看看,别写100%,还有.tab-item::after,去掉空格试试

  • 1***@qq.com (作者)

    去掉空格也不行。 是不是我升级的最近的 HBhuilder 有问题导致的

    2023-08-22 21:34

要回复问题请先登录注册