uniapp修改picker-view样式

解决问题:

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.rhkb.cn/news/23801.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

开源嵌入式实时操作系统uC/OS-II介绍

一、uC/OS-II的诞生&#xff1a;从开源实验到行业标杆 背景与起源 uC/OS-II&#xff08;Micro-Controller Operating System Version II&#xff09;诞生于1992年&#xff0c;由嵌入式系统先驱Jean J. Labrosse开发。其前身uC/OS&#xff08;1991年&#xff09;最初作为教学工…

8.spring对logback的支持

文章目录 一、入口二、源码解析LoggingApplicationListener 三、其它支持四、总结 本节以logback为背景介绍的 一、入口 gav: org.springframework.boot:spring-boot:3.3.4 spring.factories文件中有如下两个配置 org.springframework.boot.logging.LoggingSystemFactory\ …

OpenHarmony分布式数据管理子系统

OpenHarmony分布式数据管理子系统 简介 目录 组件说明 分布式数据对象数据共享分布式数据服务Key-Value数据库首选项关系型数据库标准数据化通路 相关仓 简介 子系统介绍 分布式数据管理子系统支持单设备的各种结构化数据的持久化&#xff0c;以及跨设备之间数据的同步、…

智慧后勤的消防管理:豪越科技为安全护航

智慧后勤消防管理难题大揭秘&#xff01; 在智慧后勤发展得如火如荼的当下&#xff0c;消防管理却暗藏诸多难题。传统模式下&#xff0c;消防设施分布得那叫一个散&#xff0c;就像一盘散沙&#xff0c;管理起来超费劲。人工巡检不仅效率低&#xff0c;还容易遗漏&#xff0c;不…

python轻量级框架-flask

flask简述 Flask 是 Python 生态圈中一个基于 Python 的Web 框架。其轻量、模块化和易于扩展的特点导致其被广泛使用&#xff0c;适合快速开发 Web 应用以及构建小型到中型项目。它提供了开发 Web 应用最基础的工具和组件。之所以称为微框架&#xff0c;是因为它与一些大型 We…

政安晨【零基础玩转各类开源AI项目】DeepSeek 多模态大模型Janus-Pro-7B,本地部署!支持图像识别和图像生成

政安晨的个人主页&#xff1a;政安晨 欢迎 &#x1f44d;点赞✍评论⭐收藏 希望政安晨的博客能够对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff01; 目录 下载项目 创建虚拟环境 安装项目依赖 安装 Gradio&#xff08;UI&#xff09; 运…

在 Mac mini M2 上本地部署 DeepSeek-R1:14B:使用 Ollama 和 Chatbox 的完整指南

随着人工智能技术的飞速发展&#xff0c;本地部署大型语言模型&#xff08;LLM&#xff09;已成为许多技术爱好者的热门选择。本地部署不仅能够保护隐私&#xff0c;还能提供更灵活的使用体验。本文将详细介绍如何在 Mac mini M2&#xff08;24GB 内存&#xff09;上部署 DeepS…

【Godot4.3】基于绘图函数的矢量蒙版效果与UV换算

概述 在设计圆角容器时突发奇想&#xff1a; 将圆角矩形的每个顶点坐标除以对应圆角矩形所在Rect2的size&#xff0c;就得到了顶点对应的UV坐标。然后使用draw_colored_polygon&#xff0c;便可以做到用图片填充圆角矩形的效果。而且这种计算的效果就是图片随着其填充的图像缩…

51单片机-AT24CXX存储器工作原理

1、AT24CXX存储器工作原理 1.1、特点&#xff1a; 与400KHz&#xff0c;I2C总线兼容1.8到6.0伏工作电压范围低功耗CMOS技术写保护功能当WP为高电平时进入写保护状态页写缓冲器自定时擦写周期100万次编程/擦除周期可保存数据100年8脚DIP SOIC或TSSOP封装温度范围商业级和工业级…

Linux网络 网络层

IP 协议 协议头格式 4 位版本号(version): 指定 IP 协议的版本, 对于 IPv4 来说, 就是 4. 4 位头部长度(header length): IP 头部的长度是多少个 32bit, 也就是 4 字节&#xff0c;4bit 表示最大的数字是 15, 因此 IP 头部最大长度是 60 字节. 8 位服务类型(Type Of Service):…

Unity百游修炼(1)——FootBall详细制作全流程

一、引言 游玩测试&#xff1a; Football 游玩测试 1.项目背景与动机 背景&#xff1a;在学习 Unity 的过程中&#xff0c;希望通过实际项目来巩固所学知识&#xff0c;同时出于对休闲小游戏的喜爱&#xff0c;决定开发一款简单有趣的小游戏加深自己的所学知识点。 动机&#…

C语言(13)------------>do-while循环

1.do-while循环的语法 我们知道C语言有三大结构&#xff0c;顺序、选择、循环。我们可以使用while循环、for循环、do-while循环实现循环结构。之前的博客中提及到了前两者的技术实现。可以参考&#xff1a; C语言&#xff08;11&#xff09;-------------&#xff1e;while循…

【1】VS Code 新建上位机项目---C#基础语法

VS Code 新建上位机项目---C#基础语法 1 基本概念1.1 准备工具1.2 新建项目2 C#编程基础2.1 命名空间和类2.2 数据类型2.3 控制台输入输出2.3.1 输入输出: write 与 read2.3.2 格式化 : string.Foramt() 与 $2.3.3 赋值与运算2.4 类型转换2.4.1 数值类型之间的转换:(int)2.4…

SQL:DQL数据查询语言以及系统函数(oracle)

SQL Structured Query Language&#xff0c;结构化查询语言, 是一种用于管理和操作关系数据库的标准编程语言。 sql的分类 DQL&#xff08;Data Query Language&#xff09;&#xff1a;数据查询语言 DDL&#xff08;Data Definition Language&#xff09;&#xff1a;数据…

从单片机的启动说起一个单片机到点灯发生了什么下——使用GPIO点一个灯

目录 前言 HAL库对GPIO的抽象 核心分析&#xff1a;HAL_GPIO_Init 前言 我们终于到达了熟悉的地方&#xff0c;对GPIO的初始化。经过漫长的铺垫&#xff0c;我们终于历经千辛万苦&#xff0c;来到了这里。关于GPIO的八种模式等更加详细的细节&#xff0c;由于只是点个灯&am…

提效10倍:基于Paimon+Dolphin湖仓一体新架构在阿里妈妈品牌业务探索实践

1. 业务背景 阿里妈妈品牌广告数据包括投放引擎、下发、曝光、点击等日志&#xff0c;面向运筹调控、算法特征、分析报表、诊断监控等应用场景&#xff0c;进行了品牌数仓能力建设。随着业务发展&#xff0c;基于Lambda架构的数仓开发模式&#xff0c;缺陷日益突出&#xff1a;…

一文详解U盘启动UEFI/Legacy方式以及GPT/MBR关系

对于装系统的老手而说一直想研究一下装系统的原理&#xff0c;以及面对一些问题时的解决思路&#xff0c;故对以前的方法进行原理上的解释&#xff0c;主要想理解其底层原理。 引导模式 MBR分区可以同时支持UEFI和Legacy引导&#xff0c;我们可以看一下微pe制作的启动盘&#…

基于Docker的前端环境管理:从开发环境到生产部署的实现方案

# 基于Docker的前端环境管理&#xff1a;从开发环境到生产部署的实现方案 简介及前端开发环境挑战 简介 是一种容器化平台&#xff0c;可以将应用程序及其依赖项打包为一个容器&#xff0c;提供一种轻量级、可移植的环境。它能够简化开发、部署和运维的流程&#xff0c;提高…

连锁管理系统的五大核心设计及 PHP 源码分享

在当今竞争激烈的连锁商业领域&#xff0c;高效的管理系统是企业脱颖而出的关键。商淘云连锁管理系统凭借其卓越的功能和灵活的架构&#xff0c;为连锁企业提供了强大的运营支持。在这里详细介绍其五大核心设计&#xff0c;并分享相关的 PHP 源码示例。 一、总部进销存管理 &a…

C语言基本知识------指针(4)

1. 回调函数是什么&#xff1f; 回调函数就是⼀个通过函数指针调用的函数。 如果你把函数的指针&#xff08;地址&#xff09;作为参数传递给另⼀个函数&#xff0c;当这个指针被⽤来调⽤其所指向的函数 时&#xff0c;被调⽤的函数就是回调函数。 void qsort(void base,//指针…