uni-app picker-view在支付宝小程序上面设置class不生效

uni-app picker-view在支付宝小程序上面设置class不生效

产品分类 开发环境 版本号 项目创建方式
uniapp/小程序/阿里 Mac Sonoma 14.0 HBuilderX

产品分类:uniapp/小程序/阿里
PC开发环境操作系统:Mac
PC开发环境操作系统版本号:Sonoma 14.0
HBuilderX类型:正式
HBuilderX版本号:3.8.12
第三方开发者工具版本号:淘宝开发工具 3.0.3
基础库版本号:最新
项目创建方式:HBuilderX


示例代码:

<template>  
    <view>  
        <page-head :title="title"></page-head>  
        <view class="uni-padding-wrap">  
            <view class="uni-title">  
                日期:{{year}}年{{month}}月{{day}}日  
            </view>  
        </view>  
        <picker-view v-if="visible" :indicator-style="indicatorStyle" :mask-style="maskStyle" :value="value" @change="bindChange">  
            <picker-view-column>  
                <view :class="value[0] === index ? 'item_selected':'item'" v-for="(item,index) in years" :key="index">{{item}}年</view>  
            </picker-view-column>  
        </picker-view>  
    </view>  
</template>  

<script>  
    export default {  
        data () {  
            const date = new Date()  
            const years = []  
            const year = date.getFullYear()  
            const months = []  
            const month = date.getMonth() + 1  
            const days = []  
            const day = date.getDate()  

            for (let i = 1990; i <= date.getFullYear(); i++) {  
                years.push(i)  
            }  

            for (let i = 1; i <= 12; i++) {  
                months.push(i)  
            }  

            for (let i = 1; i <= 31; i++) {  
                days.push(i)  
            }  
            return {  
                title: 'picker-view',  
                years,  
                year,  
                months,  
                month,  
                days,  
                day,  
                value: [0],  
                /**  
                 * 解决动态设置indicator-style不生效的问题  
                 */  
                visible: true,  
                // indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth/(750/100))}px;`  
                indicatorStyle: `height: 50px;`,  
                // #ifdef MP-KUAISHOU  
                maskStyle: "padding:10px 0"  
                // #endif  
                // #ifndef MP-KUAISHOU  
                maskStyle: ""  
                // #endif  
            }  
        },  
        methods: {  
            bindChange (e) {  
                console.log(e.detail.value)  
                this.value = e.detail.value  
            }  
        }  
    }  
</script>  

<style>  

    picker-view {  
        width: 100%;  
        height: 600rpx;  
        margin-top:20rpx;  
    }  

.item_selected{  

        line-height: 100rpx;  
        text-align: center;  
        color:green;  
}  
    .item {  
        line-height: 100rpx;  
        text-align: center;  
        color:red;  
    }  
</style>
2 回复

将item 改为 style写死就可以,class不行


uni-app 中使用 picker-view 组件时,如果你在支付宝小程序上设置 class 不生效,可能是由于以下几个原因:

1. 支付宝小程序的样式限制

支付宝小程序对某些组件的样式支持可能有限,特别是像 picker-view 这种原生组件。支付宝小程序的原生组件可能不支持直接通过 classstyle 来修改样式。

2. picker-view 的层级问题

picker-view 是一个原生组件,它的层级较高,可能会覆盖一些自定义的样式。支付宝小程序的原生组件通常有自己的默认样式,这些样式可能无法通过 class 直接覆盖。

3. class 的优先级问题

如果你在 picker-view 上设置了 class,但样式没有生效,可能是因为样式的优先级不够高。你可以尝试使用 !important 来提高样式的优先级。

4. 支付宝小程序的样式隔离

支付宝小程序可能会有样式隔离机制,导致某些样式无法应用到原生组件上。你可以尝试使用 :host::v-deep 等深度选择器来穿透样式隔离。

解决方案

1. 使用 style 属性

如果 class 不生效,可以尝试直接使用 style 属性来设置样式:

<picker-view style="background-color: #f0f0f0;">
  <!-- picker-view-columns -->
</picker-view>

2. 使用 !important

如果你仍然想使用 class,可以尝试在样式中使用 !important

.custom-picker {
  background-color: #f0f0f0 !important;
}
<picker-view class="custom-picker">
  <!-- picker-view-columns -->
</picker-view>

3. 使用深度选择器

如果支付宝小程序支持深度选择器,可以尝试使用 ::v-deep:host 来穿透样式隔离:

::v-deep .custom-picker {
  background-color: #f0f0f0;
}
<picker-view class="custom-picker">
  <!-- picker-view-columns -->
</picker-view>

4. 使用 uni-appcustom-style 属性

uni-app 提供了 custom-style 属性,可以用于设置原生组件的样式:

<picker-view :custom-style="{ backgroundColor: '#f0f0f0' }">
  <!-- picker-view-columns -->
</picker-view>
回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!