小程序自定制从顶部弹出的picker，模拟贝壳找房

1.背景

1.1.要求：顶部有一个tab栏，点开后会存在1级，2级，3级菜单（不论有积极菜单，都要点击到最后一级才会选中）
1.2.要求：对于有些数据第一项需要加不限，有些不需要，根据要求自行添加，点击不限展示原文字，只有点击不限之外的文字选项才会放在tab中展示
 1.3.要求：对于筛选的部分，里边有可以多项选择的，有些不是多项的，须分开
 1.4.要求：有多级的只有点击了最后一级才会把选择的文字添加到tab的对应位置，否则对应的tab位置的文字为上一次选中的
 1.5.要求：每次展开select时，如果之前有选择过的，则直接展示选中的那个展开状态，否则不用

2.思考

2.1 当时做的匆忙，都是写死的，有些是tag_name 和 tag_id ,有些是name 和 id，当时赶项目，所以没做优化，如果可以，和接口人员商议一下进行统一，就可以使用循环，不用谢name多套了。
2.2 对于1中的1.1，1.2，1.3都比较简单。对于1.4和1.5，因为小程序是双向绑定的，只要值变展示就跟着变，如果想着只用一套变量来存储，很难实现，所以使用了两套。
 2.3 多增加了一个locationName对象，把最终的展示文字存放在locationName.name中，其它的oneIndex，twoIndex，threeIndex分别对应第几个最终结果，在点击tab和内层的时候再把最终的值拿出来比对，展示最终选中的状态即可。
 2.4 在滚动这件事情上使用 scroll-view 标签比较好使

3.代码部分

3.1wxml

<!-- 列表筛选 -->
<view class='newHouseTabOut'>
  <view class='newHouseTab flex {
  {maskFlag?"fixedTop":""}}'>
    <!---- 区域 ---->
    <view class='newHouseTabLi flex alignC {
  {location.locationName.name?"on":""}} xflb_wz' data-id="0" catchtap="tab">
      <view class='newHouseTabLi-msg wmax130 line1'>{
  {location.locationName.name?location.locationName.name:"位置"}}</view>
      <view class='newHouseTabLi-sj'></view>
    </view>

    <!---- 价格 ---->
    <view class='newHouseTabLi flex alignC w170 {
  {priceIndex>0?"on":""}} xflb_jg' data-id="1" catchtap="tab">
      <view class='newHouseTabLi-msg wmax144 line1'>
        {
  {priceIndex>0?pageConfig.price[priceIndex].tag_name:"价格"}}
      </view>
      <view class='newHouseTabLi-sj'></view>
    </view>
    <!---- 户型 ----->
    <view class='newHouseTabLi flex alignC {
  {roomtagIndex>0?"on":""}} xflb_hx' data-id="2" catchtap="tab">
      <view class='newHouseTabLi-msg wmax130 line1'>
        {
  {roomtagIndex>0?pageConfig.roomtag[roomtagIndex].tag_name:"户型"}}
      </view>
      <view class='newHouseTabLi-sj'></view>
    </view>
    <!----- 筛选 ----->
    <view class='newHouseTabLi flex alignC w90 {
  {shaixuan.tese.length || shaixuan.leixing > -1 || shaixuan.mianji.length || shaixuan.kaipan > -1 || shaixuan.zhuangxiu > -1?"on":""}} xflb_sx' data-id="3" catchtap="tab">
      <view class='newHouseTabLi-msg'>筛选</view>
      <view class='newHouseTabLi-sj'></view>
    </view>
    <!-- 排序 -->
    <view class='newHouseTabLi-sx {
  {paixuIndex>0?"on":""}} xflb_px' data-id="4" catchtap="tab"></view>

  </view>
</view>

<!-- 下拉select样式 -->
<view class='newHouseMask' wx:if="{
  {maskFlag?true:false}}" catchtap="maskClick">

  <!-- 位置 -->
  <view class='newHouseMaskLi newHouseMaskLi-locatin' wx:if="{
  {tabid==0?true:false}}" catchtap="prevent">
    <!-- 一级 -->
    <scroll-view scroll-y class='newHouseMaskLi-one bg_e5e5e5'>
      <block wx:for="{
  {location.locationOneArr}}" wx:for-index="locationOneI">
        <block wx:if="{
  {locationOneI==0||locationOneI==1}}">
          <view class='newHouseMaskLi-oneLi  {
  {location.locationOneIndex==locationOneI?"on":""}}' data-index="{
  {locationOneI}}" catchtap='clickLocationOne'>
            <view class='maxw175 line1'>{
  {item.tag_name}}</view>
          </view>
        </block>

        <!-- 对于板块和地铁做限制，可能会不存在 -->
        <block wx:if="{
  {(locationOneI==2)&&(pageConfig.block.length)}}">
          <view class='newHouseMaskLi-oneLi  {
  {location.locationOneIndex==locationOneI?"on":""}}' data-index="{
  {locationOneI}}" catchtap='clickLocationOne'>
            <view class='maxw175 line1'>{
  {item.tag_name}}</view>
          </view>
        </block>
        <block wx:if="{
  {(locationOneI==3)&&(pageConfig.metro.length)}}">
          <view class='newHouseMaskLi-oneLi  {
  {location.locationOneIndex==locationOneI?"on":""}}' data-index="{
  {locationOneI}}" catchtap='clickLocationOne'>
            <view class='maxw175 line1'>{
  {item.tag_name}}</view>
          </view>
        </block>
      </block>
    </scroll-view>
    <!-- 二级,区域 -->
    <scroll-view scroll-y class='newHouseMaskLi-two bg_fff' wx:if='{
  {(location.locationOneIndex==1)&&pageConfig.district.length}}'>
      <block wx:for="{
  {pageConfig.district}}" wx:for-index="locationTwoI">
        <view class='newHouseMaskLi-twoLi line1 {
  {location.locationTwoIndex1==locationTwoI?"on":""}}' data-index='{
  {locationTwoI}}' data-type='1' data-name="{
  {item.tag_name}}" catchtap='clickLocationTwo'>{
  {item.tag_name}}</view>
      </block>
    </scroll-view>
    <!-- 二级，板块 -->
    <scroll-view scroll-y class='newHouseMaskLi-two bg_fff' wx:if='{
  {(location.locationOneIndex==2)&&pageConfig.block.length}}'>
      <block wx:for="{
  {pageConfig.block}}" wx:for-index="locationTwoI">
        <view class='newHouseMaskLi-twoLi line1 {
  {location.locationTwoIndex2==locationTwoI?"on":""}}' data-index='{
  {locationTwoI}}' data-type='2' data-name="{
  {item.tag_name}}" catchtap='clickLocationTwo'>{
  {item.tag_name}}</view>
      </block>
    </scroll-view>
    <!-- 二级，地铁 -->
    <scroll-view scroll-y class='newHouseMaskLi-two bg_fff' wx:if='{
  {(location.locationOneIndex==3)&&pageConfig.metro.length}}'>
      <block wx:for="{
  {pageConfig.metro}}" wx:for-index="locationTwoI">
        <view class='newHouseMaskLi-twoLi line1 {
  {location.locationTwoIndex3==locationTwoI?"on":""}}' data-index='{
  {locationTwoI}}' data-type='3' data-name="{
  {item.name}}" catchtap='clickLocationTwo'>{
  {item.name}}</view>
      </block>
    </scroll-view>
    <!-- 三级 -->
    <scroll-view scroll-y class='newHouseMaskLi-three bg_fff' wx:if="{
  {location.locationOneIndex==3&&(location.locationTwoIndex3>-1)}}">
      <block wx:for="{
  {pageConfig.metro[location.locationTwoIndex3].station}}" wx:for-index="locationThreeI">
        <view class='newHouseMaskLi-threeLi line1 {
  {location.locationThreeIndex==locationThreeI?"on":""}}' data-index='{
  {locationThreeI}}' data-name="{
  {item.name}}" data-type='3' catchtap='clickLocationThree'>{
  {item.name}}</view>
      </block>
    </scroll-view>
  </view>

  <!-- 价格 -->
  <scroll-view scroll-y class='newHouseMaskLi newHouseMaskLi-price' wx:if="{
  {tabid==1?true:false}}" catchtap="prevent">
    <block wx:for="{
  {pageConfig.price}}" wx:for-index="priceI">
      <view class='newHouseMaskLi-price-li {
  {priceI==priceIndex?"on":""}}' data-index="{
  {priceI}}" catchtap='clickSelectOne'>{
  {item.tag_name}}</view>
    </block>
  </scroll-view>

  <!-- 户型 -->
  <scroll-view scroll-y class='newHouseMaskLi newHouseMaskLi-price' wx:if="{
  {tabid==2?true:false}}" catchtap="prevent">
    <block wx:for=