关于微信小程序自定义Picker样式的picker-view

最新推荐文章于 2024-08-01 09:43:57 发布

YangChaoYue1221

最新推荐文章于 2024-08-01 09:43:57 发布

阅读量1.1w

点赞数 4

文章标签：小程序

本文链接：https://blog.csdn.net/YangChaoYue1221/article/details/108756291

版权

这里给大家介绍一下在开发微信小程序中使用到需要自定义样式的picker（picker-view）的基本用法
在这里插入图片描述
这里就是一个很简单的自定义样式的Picker。
下面贴出代码

wxml：

<picker-view indicator-class='pickerCol' bindchange="bindChange" class="{{ pickerShow ? 'show' : '' }}">
    <view class='btns'>
      <view bindtap="closePicker">取消</view>
      <view bindtap="getValue">确认</view>
    </view>
    <picker-view-column>
      <view wx:for="{{pickerArray}}" style="line-height: 50rpx" class="{{ pickerIndex === index ? 'pick-text' : '' }}">{{item}}</view>
    </picker-view-column>
  </picker-view>

wxss：

// 设置头部的取消和确定按钮
picker-view .btns {
  width: 100%;
  height: 100rpx;
  color: #baa076;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
}

picker-view .btns view {
  width: 20%;
  text-align: center;
  font-size: 32rpx;
}

picker-view {
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: #FFF;
  text-align: center;
  box-sizing: border-box;
  width: 100%;
  height: 0;
  border-radius: 30rpx 30rpx 0 0;
  z-index: 999;
}

// 添加弹出的过渡动画
picker-view.show {
  height: 36%;
  transition: all 0.4s;
}

// 设置单列数据的样式
picker-view-column {
  border-radius: 30rpx 30rpx 0 0;
  color: #B8B8B8;
  font-size: 32rpx;
  margin-top: 47rpx;
}

// 设置选中框的样式
.pickerCol {
  width: 100%;
  height: 50rpx;
  color: #baa076;
  border-top: 1px solid #f2f3f5;
  border-bottom: 1px solid #f2f3f5;
}

// 添加前面的三角形
.pickerCol::before {
  width: 10rpx; 
  height: 28rpx;
  position: absolute;
  left: 200rpx;
  top: 15rpx;
  background-image: url(//demo.17weiju.com/wxsh/wxsh/image/food-sjx.png);
  background-size: 100% 100%;
}

// 这里的两个伪类有默认样式（两条线），但是介于我已经重写了before，这里就取消after的显示
.pickerCol::after {
  display: none;
}

// 自定义选中的时候字体颜色和大小
.pick-text {
  color: #baa076;
  font-size: 34rpx;
}

在使用这个picker-view组件时最主要的就是样式问题，它不像picker能给你主动添加wxml的结构，picker-view的结构主要还是自己完成。

（js逻辑部分很简单就不贴出来了，确实我太懒了）