关于微信小程序自定义Picker样式的picker-view - 新闻资讯 - 云南小程序开发|云南软件开发|云南网站建设-昆明葵宇信息科技有限公司

159-8711-8523

云南网建设/小程序开发/软件开发

知识

不管是网站,软件还是小程序,都要直接或间接能为您产生价值,我们在追求其视觉表现的同时,更侧重于功能的便捷,营销的便利,运营的高效,让网站成为营销工具,让软件能切实提升企业内部管理水平和效率。优秀的程序为后期升级提供便捷的支持!

您当前位置>首页 » 新闻资讯 » 小程序相关 >

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

发表时间:2020-9-23

发布人:葵宇科技

浏览次数:239

这里给大家介绍一下在开发微信小程序中使用到需要自定义样式的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逻辑部分很简单就不贴出来了,确实我太懒了)

相关案例查看更多