微信小程序 picker 组件不能自定义 取消和确定的文字 |自定义 picker

picker 组件不能自定义 取消和确定的文字 🐤

---

摘要 : 由于本人要做一个支持多语言的系统，在完成了多语言切换功能后发现了此问题，微信小程序实现多语言方案

picker 组件本身是不支持的自定义文字 🐤 🐤

后面就使用picker-view来实现（取消和确认可换词）

上图 🐤

上战歌（代码） 🐤

wxml

<view bindtap="pickerState">
  {{pickerArray[pickerIndex]}}
</view>
<picker-view indicator-class='pickerCol' bindchange="bindChange" class="{{ pickerShow ? 'show' : '' }}">
  <view class='btns'>
    <view bindtap="pickerState">取消</view>
    <view bindtap="getValue">确认</view>
  </view>
  <picker-view-column>
    <view wx:for="{{pickerArray}}" wx:key="index" style="line-height: 46px">{{item}}</view>
  </picker-view-column>
</picker-view>
<!-- 遮罩层 -->
<view class="overlay" wx:if="{{pickerShow}}"  bindtap="pickerState"></view>

wxss

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

picker-view .btns view {
  width: 20%;
  text-align: center;
  font-size: 32rpx;
}
.btns view:first-child {
  color: #666666;
}
picker-view {
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: #fff;
  text-align: center;
  box-sizing: border-box;
  width: 100%;
  height: 0;
  z-index: 999;
}

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

/* 设置单列数据的样式 */
picker-view-column {
  font-size: 32rpx;
  margin-top: 47rpx;
}

/* 设置选中框的样式 */
.pickerCol {
  width: 100%;
  height: 46px;
  line-height: 46px;
  color: #baa076;
  border-top: 1rpx solid #f2f3f5;
  border-bottom: 1rpx 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;
}

/* 遮罩层 */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.4);
}

js

Page({
  data: {
    pickerArray: ['中国', '美国', '俄罗斯', '日本'],
    pickerShow: true,
    array: ['召唤师', '爱上丢'],
    pickerIndex: 0,
    selIndex: 0

  },
  // 当前选中的
  bindChange(e) {
    this.setData({
      selIndex: e.detail.value[0],
    })
  },
  // 是否展示
  pickerState() {
    this.setData({
      pickerShow: !this.data.pickerShow
    })
  },
  // 确认按钮
  getValue() {
    this.setData({
      pickerIndex: this.data.selIndex,
    })
    this.pickerState()
  },
})

在当前参考链接中进行的整改

最后发现我是小丑，本来想根据切换的语言来显示取消和 确定文字为翻译后的语言 🐤

最后发现这个会根据手机系统的语言来显示文字，不需要做多语言，笑死 🐤

赞 🐤