uniapp修改picker-view样式

ops/2025/2/25 5:03:47/

解决问题:

1.选中文案样式,比如字体颜色

2.修改分割线颜色

3.多列时,修改两边间距让其平分

展示效果:

代码如下

<template><u-popup :show="showPicker" :safeAreaInsetBottom="false" @close="close"><view class="title-box"><view class="title">{{title}}</view><text class="iconfont icon-guanbidankuang" @click="close"></text></view><picker-view class="picker-view" indicator-class="picker-selected" immediate-change :value="innerIndex"@change="changeHandler"><picker-view-column><view class="item" :class="columns2.length==0||columns3.length==0?'first-item':'col1'"v-for="(item, index) in columns" :key="index"><!-- 设置选中文字样式class --><view :class="columns[innerIndex[0]].text==item.text?'selected-text':''">{{item.text}}</view></view></picker-view-column><picker-view-column v-if="columns2&&columns2.length>0"><view class="item" v-for="(item, index) in columns2" :key="index"><view :class="columns2[innerIndex[1]].text==item.text?'selected-text':''">{{item.text}}</view></view></picker-view-column><picker-view-column v-if="columns3&&columns3.length>0"><view class="item" v-for="(item, index) in columns3" :key="index"><view :class="columns3[innerIndex[2]].text==item.text?'selected-text':''">{{item.text}}</view></view></picker-view-column></picker-view><view class="btn-box"><view class="btn" @click="close('submit')">确定</view></view></u-popup>
</template><script>export default {data() {return {innerIndex: [0, 0, 0],showPicker: false,currentData: [],previousValue: [0, 0, 0] // 用于保存之前的选中值}},props: {columns: {type: Array,default: []},columns2: {type: Array,default: []},columns3: {type: Array,default: []},show: {type: Boolean,default: false},title: {type: String,default: '请选择'},selectIndex: {type: Array,default: []}},watch: {show: function() {this.showPicker = this.show},selectIndex() {this.innerIndex = this.selectIndex}},mounted() {if (this.selectIndex && this.selectIndex.length > 0) {this.innerIndex = this.selectIndex}this.currentData = [this.columns[this.innerIndex[0]], this.columns2.length > 0 ? this.columns2[this.innerIndex[1]] : {}, this.columns3.length >0 ? this.columns3[this.innerIndex[2]] : {}]// console.log(this.currentData);},methods: {changeHandler(e) {const that = thisuni.vibrateShort({complete() {console.log(e);that.innerIndex = e.detail.valueconst previousValue = that.previousValue;// 判断哪一列发生了变化for (let i = 0; i < that.innerIndex.length; i++) {if (that.innerIndex[i] !== previousValue[i]) {// console.log(`第 ${i + 1} 列发生了变化`);that.$emit('changeIndex', i + 1)break;}}that.previousValue = that.innerIndexthat.currentData = [that.columns[e.detail.value[0]], that.columns2.length > 0 ? that.columns2[e.detail.value[1]] : {},that.columns3.length > 0 ? that.columns3[e.detail.value[2]] : {}]// that.currentData = that.columns[e.detail.value[0]]}})},close(type) {// this.showPicker = falseif (type === 'submit') {console.log(this.currentData);this.$emit('submit', this.currentData)} else {this.$emit('close', true)}}}}
</script><style lang="scss" scoped>.title-box {padding: 28rpx 0;display: flex;justify-content: center;align-items: center;.title {font-weight: 500;font-size: 32rpx;}.icon-guanbidankuang {font-size: 60rpx;position: absolute;right: 40rpx;}}.picker-view {height: 480rpx;margin-bottom: 34rpx;margin-top: 48rpx;padding: 0 60rpx;.item {// line-height: 96rpx;// text-align: center;font-size: 28rpx;display: flex;align-items: center;justify-content: flex-end;}.first-item {justify-content: center;}.col1 {justify-content: flex-start;}}.btn-box {padding: 12rpx 24rpx;z-index: 9;box-shadow: 0px 4rpx 16rpx 0px rgba(0, 0, 0, 0.1);padding-bottom: calc(env(safe-area-inset-bottom) + 12rpx);.btn {border-radius: 20rpx;background: $primary-color;height: 74rpx;display: flex;align-items: center;justify-content: center;color: #fff;font-size: 28rpx;letter-spacing: 0.84rpx;font-weight: 600;}}
</style>
<style>.picker-selected {height: 96rpx;}.picker-selected::before {content: '';position: absolute;top: 0;border: 2rpx solid #FAFAFA;}.selected-text {font-weight: 500;}.picker-selected::after {content: '';position: absolute;bottom: 0;border: 2rpx solid #FAFAFA;}
</style>

引用,省略数据填充

<template><selection-picker v-if="columnsTime.length>0" :show="showTime" :columns="columnsTime" :selectIndex="selectIndex" :columns2="columnsTime2" :columns3="columnsTime3" title="请选择出发时间" @close="showTime=false" @submit="getTime"></selection-picker>
</template><button @click="showTime=true">打开</button><script>export default {data() {return {showTime: false}}}
</script>


http://www.ppmy.cn/ops/161120.html

相关文章

Linux远程kill进程及$处理

个人博客地址&#xff1a;Linux远程kill进程及$处理 | 一张假钞的真实世界 在远程执行的命令中如果包含特殊字符&#xff08;$&#xff09;时需要转义&#xff0c;如下&#xff1a; ssh rootremote_host "ps -ef|grep process_name | grep -v grep | awk {print $2}&qu…

【后端基础】布隆过滤器原理

文章目录 一、Bloom Filter&#xff08;布隆过滤器&#xff09;概述1. Bloom Filter 的特点2. Bloom Filter 的工作原理 二、示例1. 添加与查询2. 假阳性 三、Bloom Filter 的操作1、假阳性概率2、空间效率3、哈希函数的选择 四、应用 Bloom Filter 是一种非常高效的概率型数据…

使用Hardhat实现ERC20 代币合约详解

ERC20 代币合约详解 &#x1f4b0; 1. 合约概览 // SPDX-License-Identifier: MIT pragma solidity ^0.8.20;import "openzeppelin/contracts/token/ERC20/ERC20.sol";contract MyToken is ERC20 {constructor() ERC20("MyToken", "MTK") {_min…

单臂路由

单臂路由&#xff08;Router on a Stick&#xff09;是一种网络配置方式&#xff0c;主要用于在单个物理接口上实现多个VLAN之间的路由。它通常用于交换机与路由器之间的连接&#xff0c;适用于VLAN间通信需求较小的情况。 工作原理 VLAN划分&#xff1a;交换机上配置多个VLAN…

HarmonyOS学习第5天: Hello World的诞生之旅

鸿蒙初印象&#xff1a;开启探索之门 在操作系统的广袤天地中&#xff0c;HarmonyOS&#xff08;鸿蒙系统&#xff09;宛如一颗冉冉升起的新星&#xff0c;自诞生起便备受瞩目。它由华为倾力打造&#xff0c;是一款基于微内核的全场景分布式操作系统&#xff0c;以其独特的技术…

Python中的Flask深入认知搭建前端页面?

一、Flask 的介绍 1. 什么是Flask&#xff1f; Flask 是一个轻量级的 Python Web 框架&#xff0c;因其简单易用、灵活性高而广受欢迎。它适合快速开发小型应用&#xff0c;也可以通过扩展支持复杂的功能需求。可以结合 HTML、CSS 和 JavaScript 实现丰富的交互功能。 2. 核…

英文字体:极简现代浓缩未来派科技海报标题排版无衬线字体 PODIUM Sharp Font

PODIUM Sharp 是 2012 年设计的 DUDU 字体的扩展版本。多年后&#xff0c;我决定通过添加新的母版和粗细来重建和开发这种字体。最后&#xff0c;PODIUM Sharp 由 234 种款式组成&#xff1a;从超压缩发际线到超扩展重度。 这个项目的主要目的是在我在旧波兰标本中发现的不同模…

Git版本控制系统---本地操作(万字详解!)

目录 git基本配置 认识工作区、暂存区、版本库 添加文件--情况一&#xff1a; 添加文件-情况二: 修改文件: 版本回退&#xff1a; git基本配置 1.初始化本地仓库&#xff0c;注意&#xff1a;一定要在一个目录下进行&#xff0c;一般都是新建一个文件夹&#xff0c;在文件…