实现微信小程序无限滚动的自定义Picker组件

公司需要实现一个无限滚动和自定义的picker组件，自己抱着试试看的心态去写了，反正给的时间充足，后面发现scroll-view只有bindscroll方法，竟然没有scrollstart和scrollend方法，没办法我就把本来是固定的选中状态，变成的随着currentSelectIndex改变，体验可能有所影响，但是总体看来还不错=。=
这是wxml代码：

<!--components/mySelector/mySelector.wxml-->
<view class="mySelectorView" style="width:{{windowWidth}};height:{{windowHeight}}">
  <view class="hiddenView"></view>
  <view class="contentView">
    <view class="top">{{title}}</view>
    <view class="middle">
      <scroll-view class="scrollView" scroll-y="true" style="height: 310rpx;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" upper-threshold="{{(50*formatedList.length/round)*rate}}" lower-threshold="{{(50*formatedList.length/round)*rate}}" scroll-top="{{(currentSelectIndex*50 - 100)*rate}}" scroll-anchoring="true">
        <view class="listView">
          <block wx:for="{{formatedList}}" wx:key="index">
            <view id="{{'option'+index}}" class="itemView biggerItemView" wx:if="{{index == currentSelectIndex}}">{{item.name}}</view>
            <view id="{{'option'+index}}" class="itemView bigItemView" wx:elif="{{(index == currentSelectIndex+1)||(index == currentSelectIndex-1)}}">{{item.name}}</view>
            <view id="{{'option'+index}}" class="itemView" wx:else>{{item.name}}</view>
          </block>
        </view>
      </scroll-view>
    </view>
    <view class="bottom">
      <view class="btn sureBtn" bindtap="toSure">确认</view> 
      <view class="btn cancelBtn" bindtap="toCancel">取消</view> 
    </view>
  </view>
</view>

其中currentSelectIndex表示当前选中item的index。当等于currentSelectIndex时，item的类名为biggerItemView，当等于currentSelectIndex-1或者等于currentSelectIndex+1时，item的类名为bigItemView,主要实现了下图样式：

这是wxss：

/* components/mySelector/mySelector.wxss */
.mySelectorView{
  position: absolute;
  z-index: 7777;
  width: 100%;
  height: 100%;
}
.mySelectorView .hiddenView{
  width: 100%;
  height: 100%;
  background: #000000;
  -moz-opacity: 0.5;
  opacity: 0.50;
  filter: alpha(opacity=50);
  position: absolute;
  z-index: -1;
}
.mySelectorView .contentView{
  position: absolute;
  z-index: 7777;
  width: 550rpx;
  height: 636rpx;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background: #ffffff;
  border-radius: 10rpx;
  display: flex;
  flex-direction: column;
  padding: 0 45rpx;
}
.mySelectorView .top{
  width: 100%;
  height: 90rpx;
  border-bottom: 1px solid #E7E7E7;
  line-height: 90rpx;
  font-size: 32rpx;
  color: #333333;
}
.mySelectorView .middle{
  flex: 1;
}
.mySelectorView .scrollView{
  width: 100%;
  overflow-anchor: auto;
}
.mySelectorView .listView{
  width: 100%;
  height: auto;
  overflow: hidden;
}
.mySelectorView .itemView{
  width: 100%;
  height: 50rpx;
  line-height: 50rpx;
  float: left;
  text-align: center;
  color: #B8BFC6;
  font-size: 26rpx;
  transition: all 1s;
}
.mySelectorView .bigItemView{
  width: 100%;
  height: 60rpx;
  line-height: 60rpx;
  font-size: 36rpx;
  float: left;
  text-align: center;
  color: #B8BFC6;
}
.mySelectorView .biggerItemView{
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  font-size: 42rpx;
  border-top: 1px solid #B8BFC6;
  border-bottom: 1px solid #B8BFC6;
  float: left;
  text-align: center;
  color: #B8BFC6;
}
.mySelectorView .bottom{
  margin: 35rpx 0;
}
.mySelectorView .btn{
  width: 202rpx;
  height: 74rpx;
  line-height: 74rpx;
  text-align: center;
  color: #B8BFC6;
  float: right;
  font-size: 24rpx;
  border-radius: 8rpx;
}
.mySelectorView .sureBtn{
  background: #E45F50;
  color: #ffffff;
}

这是js代码：

// components/mySelector/mySelector.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    title: {
      type: String,
      value: ""
    },
    selectedCompany: {
      type: Object,
      value: {}
    },
    list: {
      type: Array,
      value: []
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    windowWidth: 0,
    windowHeight: 0,
    toView: '',
    formatedList: [],
    currentSelectIndex: 0,
    rate: 1,
    deltaY: 0,
    round: 0
  },
  methods: {
    upper(e) {
    },
    lower(e) {
    },
    scroll(e) {
      let data = ((e.detail.scrollTop/this.data.rate + 100))/50;
      let changedIndex = 0;
      let distance = data - Math.floor(data);
      // if(e.detail.deltaY>=0){
      //   changedIndex = Math.ceil(data);
      // }else{
      //   changedIndex = Math.floor(data);
      // }
      changedIndex = Math.round(data);
      if(Math.abs(this.data.currentSelectIndex - changedIndex) >= 1){
        if(changedIndex <= 3){
          console.log('顶');
          let template = this.data.formatedList.length/this.data.round
          changedIndex = template*(this.data.round - 2) + (template>=4?template:(4-template));
        }else if(changedIndex >= this.data.formatedList.length - 3){
          console.log('底');
          let template = this.data.formatedList.length/this.data.round
          changedIndex = template + (template>=4?(template - 4):template) - 1;
        }
        this.setData({
          currentSelectIndex: changedIndex
        });
        // console.log(this.data.currentSelectIndex)
        // console.log(this.data.formatedList[changedIndex].name)
      }else{

      }
      this.setData({
        deltaY: e.detail.deltaY
      });
      // console.log(this.data.currentSelectIndex)
    },
    toCancel(){
      this.triggerEvent('closeSeletor', false);
    },
    toSure(){
      this.triggerEvent('choosenCompany', this.data.formatedList[this.data.currentSelectIndex]);
    },
    formatList(){
      let list = this.data.list;
      let newList = [];
      let round = 0;
      if(list.length >= 5){
        this.setData({
          round: 3
        });
      }else{
        this.setData({
          round: 8 - list.length
        });
      }
      let add = 0;
      for(let i = 0; i < this.data.round;i++){
        for(let key in list){
            if(list[key].id == this.data.selectedCompany.id){
              add = key-0;
            }
            newList.push(list[key]);
        }
      }
      this.setData({
        formatedList: newList,
        currentSelectIndex: newList.length/this.data.round*Math.floor(this.data.round/2)+add
      })
    }
  },
  lifetimes: {
    attached: function() {
      var that = this;
      wx.getSystemInfo({
        success (res) {
          that.setData({
            windowWidth: res.windowWidth+'px',
            windowHeight: res.windowHeight+'px',
            rate: (res.windowWidth/750).toFixed(2) - 0
          })
        }
      })
      this.formatList();
    },
  }
})

使用前需要在父组件的json文件引用：（只需要my-selector，其他不需要引入）

  <view class="picker" bindtap="toChooseCompany">
    <text>{{selectedCompany.name}}</text>
    <image class="triangle" src="../../images/ic_xiafan.png"></image>
    <!-- <i class="triangle"></i> -->
  </view>
 <my-selector wx:if="{{showSelectorFlag}}" title="所有公司" list="{{selectComponanyList}}" selectedCompany="{{selectedCompany}}" bind:choosenCompany="choosenCompany" bind:closeSeletor="closeSeletor" id="mySelector" style="position: absolute;top: 0;left: 0;width: 0;height: 0;"></my-selector>

这是父组件的js：（这里的showEchart是用来关闭echarts图表的，因为引用的echarts图表会显示在弹窗之上，所以每次弹窗的时候，需要不显示echarts，init方法是重新渲染echarts的方法，这里可以注释掉）

  data: {
    selectedCompany: {
      id: 3,
      name: '芜湖谷普酒店'
    },
    showSelectorFlag: false,
    selectComponanyList: [
      {
        id: 1,
        name: '海口民宿管理公司',
      },{
        id: 2,
        name: '三亚民宿管理公司',
      },{
        id: 3,
        name: '芜湖乐游科技有限公司'
      },{
        id: 4,
        name: '黄山民宿管理公司'
      },{
        id: 5,
        name: '厦门民宿管理公司'
      },{
        id: 6,
        name: '上海单身公寓'
      },{
        id: 7,
        name: '芜湖谷普酒店'
      }
    ],
  }
  //显示选择器
  toChooseCompany(){
    this.setData({
      showSelectorFlag: true,
      showEchart: false
    });
  },
  //选择器 选择公司回调
  choosenCompany(e){
    this.setData({
      showSelectorFlag: false,
      selectedCompany: e.detail,
      showEchart: true
    });
    this.init();
  },
  //关闭选择器
  closeSeletor(flag){
    this.setData({
      showSelectorFlag: false,
      showEchart: true
    });
    this.init();
  },