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>
将item 改为 style写死就可以,class不行
在 uni-app
中使用 picker-view
组件时,如果你在支付宝小程序上设置 class
不生效,可能是由于以下几个原因:
1. 支付宝小程序的样式限制
支付宝小程序对某些组件的样式支持可能有限,特别是像 picker-view
这种原生组件。支付宝小程序的原生组件可能不支持直接通过 class
或 style
来修改样式。
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-app
的 custom-style
属性
uni-app
提供了 custom-style
属性,可以用于设置原生组件的样式:
<picker-view :custom-style="{ backgroundColor: '#f0f0f0' }">
<!-- picker-view-columns -->
</picker-view>