uniapp 自定义 picker “取消”及“完成”文字

uniapp picker组件并无可以修改“完成”和“取消”文字的属性，直接改源码则比较麻烦，故可以通过css伪类的方式来修改：

如上图，将uniapp自带的文字颜色强制改为白色，为其添加伪类并设置伪类的文字和颜色，即可实现“完成”文字的自定义修改；

同理，自定义“取消”，为类名为uni-picker-action-cancel的标签设置相应的伪类即可

效果图：

使用 page 标签选择器，可以修改顶层节点的样式 page { display: blockmin-height: 100%background-color: red}使用 page 标签选择器，可以修改顶层节点的样式page { display: blockmin-height: 100%background-color: red}

一、自定义PickerView的代码

1、h文件中代码如下：

#import <UIKit/UIKit.h>

typedef void (^MyBasicBlock)(id result)

@interface YCPickerView : UIView

@property (retain, nonatomic) NSArray *arrPickerData

@property (retain, nonatomic) UIPickerView *pickerView

@property (nonatomic, copy) MyBasicBlock selectBlock

- (void)popPickerView

@end

2、m文件中代码如下：

#define SCREEN_WIDTH[[UIScreen mainScreen] bounds].size.width

#define SCREEN_HEIGHT [[UIScreen mainScreen] bounds].size.height

#define PICKERVIEW_HEIGHT 256

#import "YCPickerView.h"

@interface YCPickerView () <UIPickerViewDelegate,UIPickerViewDataSource>

{

NSInteger selectRow

}

@property (retain, nonatomic) UIView *baseView

@end

@implementation YCPickerView

- (id)initWithFrame:(CGRect)frame

{

self = [super initWithFrame:frame]

if (self) {

_baseView = [[UIView alloc] initWithFrame:CGRectMake(0, SCREEN_HEIGHT-PICKERVIEW_HEIGHT, SCREEN_WIDTH, PICKERVIEW_HEIGHT)]

_baseView.backgroundColor = [UIColor orangeColor]

[self addSubview:_baseView]

UIButton *btnOK = [[UIButton alloc] initWithFrame:CGRectMake(SCREEN_WIDTH-50, 0, 40, 40)]

[btnOK setTitle:@"确定" forState:UIControlStateNormal]

[btnOK setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal]

[btnOK addTarget:self action:@selector(pickerViewBtnOK:) forControlEvents:UIControlEventTouchUpInside]

[_baseView addSubview:btnOK]

UIButton *btnCancel = [[UIButton alloc] initWithFrame:CGRectMake(10, 0, 40, 40)]

[btnCancel setTitle:@"取消" forState:UIControlStateNormal]

[btnCancel setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal]

[btnCancel addTarget:self action:@selector(pickerViewBtnCancel:) forControlEvents:UIControlEventTouchUpInside]

[_baseView addSubview:btnCancel]

_pickerView = [[UIPickerView alloc] initWithFrame:CGRectMake(0, 40, SCREEN_WIDTH, PICKERVIEW_HEIGHT-40)]

_pickerView.delegate = self

_pickerView.dataSource = self

_pickerView.backgroundColor = [UIColor whiteColor]

[_baseView addSubview:_pickerView]

UITapGestureRecognizer *tapGesture = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(dismissPickerView)]

[self addGestureRecognizer:tapGesture]

}

return self

}

#pragma mark - UIPickerViewDataSource

//返回多少列

- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView {

return 1

}

//每列对应多少行

- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component {

return _arrPickerData.count

}

//每行显示的数据

- (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component {

return _arrPickerData[row]

}

#pragma mark - UIPickerViewDelegate

//选中pickerView的某一行

- (void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component

{

selectRow = row

}

#pragma mark - Private Menthods

//d出pickerView

- (void)popPickerView

{

[UIView animateWithDuration:0.5

animations:^{

self.frame = CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT)

}]

}

//取消pickerView

- (void)dismissPickerView

{

[UIView animateWithDuration:0.5

animations:^{

self.frame = CGRectMake(0, SCREEN_HEIGHT, SCREEN_WIDTH, SCREEN_HEIGHT)

}]

}

//确定

- (void)pickerViewBtnOK:(id)sender

{

if (self.selectBlock) {

self.selectBlock(_arrPickerData[selectRow])

}

[self dismissPickerView]

}

//取消

- (void)pickerViewBtnCancel:(id)sender

{

if (self.selectBlock) {

self.selectBlock(nil)

}

[self dismissPickerView]

}

@end

---