微信小程序 - 自定义 picker 组件解决选项高度问题(动画效果)

自定义 picker 组件

wxml

<view class="picker-mask" wx:if="{{isShow}}" bindtap="onTapMask">
  <view class="customer-wrap-picker-container " animation="{{animation}}">
    <view class="header">
      <view class="header-btn btn__left" catchtap="onCancel">Cancel</view>
      <view class="header-btn btn__right" catchtap="onConfirm">OK</view>
    </view>
    <picker-view style="width: 100%; height: 500rpx;" indicator-style="{{indicatorStyle}}" value="{{ value }}" bindchange="bindChange" catchtap="no">
      <picker-view-column>
        <slot></slot>
      </picker-view-column>
    </picker-view>
  </view>
</view>

js

Component({
  properties: {
    value: {
      type: Array,
      value: [0],
    },
    indicatorStyle: {
      type: String,
      value: ''
    }
  },
  data: {
    isShow: false,
  },
    attached () {
      this.animation = wx.createAnimation({
        duration: 300,
      })
    },
  methods: {
    showPicker() {
      this.animation.translateY(250).step()
      this.setData({ animation: this.animation.export() })
      this.setData({ isShow: true });
      this.animation.translateY(0).step()
      this.setData({ animation: this.animation.export() })
      this.setData({
        animationData: this.animation.export(),
      })
    },
    bindChange(e) {
      const val = e.detail.value;
      this.setData({ value: val });
    },
    onCancel() {
      this.setData({ isShow: false });
      this.triggerEvent('cancel');
    },
    onConfirm() {
      this.setData({ isShow: false });
      this.triggerEvent('confirm', this.data.value);
    },
    onTapMask() {
      this.setData({ isShow: false });
      this.triggerEvent('tapmask');
    }
  },
});

wxss

.picker-mask {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  background-color: rgba(0,0,0,0.7);
  z-index: 9999;
  flex-direction: column;
  justify-content: flex-end;
 }

 .customer-wrap-picker-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: white;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100rpx;
  border-bottom: 1rpx solid #d3cfcf;
}

.header-btn {
  font-size: 30rpx;
  width: 150rpx;
  height: 100rpx;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.btn__left {
  color: #878787;
}

.btn__right {
  color: #1296DB;
}

.store-picker {
  height: 80px
}

json

{
  "component": true
}

使用组件

wxml

<view class="container">
  <view bindtap="showpicker">选择对象: {{user.name}}</view>
  <customer-picker id="custom-picker"  bind:confirm="onChange" value="{{userIndex}}" indicatorStyle="height: 80px;">
    <view wx:for="{{users}}" class="user-item">
      <view>{{item.name}}</view>
      <view>{{item.address}}</view>
    </view>
  </customer-picker>
</view>

js

Page({
  data: {
    userIndex: [0],
    user: '',
    users: [{
      id: '1',
      address: '上海市浦东新区郭守敬路498号软件园xx号楼',
      name: '火火火'
    },
      {
        id: '2',
        address: '上海市浦东新区郭守敬路498号软件园xx号楼',
        name: '水水水'
      }]
  },
  showpicker() {
    this.selectComponent("#custom-picker").showPicker()
  },
  onChange: function (e) {
    const index = e.detail;
    const user = this.data.users[index];
    this.setData({ user, userIndex: index})
  }
})

wxss

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.user-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center
}

json

{
  "usingComponents": {
    "customer-picker": "./components/customer-picker/index"
  }
}

开发者工具预览