问题

这段时间一直在做去年开发的两款车辆报废小程序，这两个小程序目前将主体迁移市政府市场监督管理局名下了，无论是迁移还是新需求开发亦或者是维护旧代码过程还是比较顺利的，就是碰到一个小问题，耽误了点时间，不过还好没耽误进度（评估的时间比较长，哈哈~）。问题是有个报废点的列表，安卓手机没问题，就是苹果系统出现列表滑不动的情况。下面详细说下问题及解决方案。

苹果系统列表滚动不了

直接上代码：

  <view slot="backText">返回</view>
  <view slot="content">报废点</view>
</cu-custom>

<view class="cu-bar bg-white search fixed" style="top:{{CustomBar}}px;">
  <view class="search-form round">
    <text class="cuIcon-search"></text>
    <input type="text" placeholder="输入网点/地址" name="name" bindinput='getInputName' confirm-type="search"></input>
  </view>
  <view class="action">
    <button class="cu-btn bg-gradual-blue shadow-blur round" bindtap='searchName'>搜索</button>
  </view>
</view>
<scroll-view class="list-box" scroll-y="true">
  <block wx:if="{{list.length}}">
    <view wx:for="{{list}}" wx:key="index" class="cu-list menu sm-border" data-index="{{index}}">
      <view class="cu-item">
        <view class="content" style="width: 20%;text-align: left;">
          <text class="text-grey">报废网点</text>
        </view>
        <view class="action" style="width: 80%;text-align: right;">
          <text class="text-grey text-sm">{{item.name}}</text>
        </view>
      </view>
      <view class="cu-item">
        <view class="content" style="width: 20%;text-align: left;">
          <text class="text-grey">详细地址</text>
        </view>
        <view class="action" style="width: 80%;text-align: right;">
          <text class="text-grey text-sm">{{item.address}}</text>
        </view>
      </view>
      <view class="cu-item">
        <view class="content">
          <text class="text-grey" style="width: 20%;text-align: left;">所属区域</text>
        </view>
        <view class="action" style="width: 80%;text-align: right;">
          <text class="text-grey text-sm">{{item.area_name}}</text>
        </view>
      </view>
      <view class="flex solid-bottom justify-around">
        <view class="padding-sm margin-xs">
          <button class="cu-btn  bg-cyan" bindtap="go_yuyue" data-target="{{item}}">前去预约</button>
        </view>
        <view class="padding-sm margin-xs">
          <button class="cu-btn  bg-blue cuIcon-location" bindtap="showModal" data-target="{{item}}">地图位置</button>
        </view>
      </view>
    </view>
  </block>
  <block wx:else>
    <view class='main'>
      <view style="width:100%;text-align: center;">
        <view>
          <image src="https://rltest-pet.oss-cn-hangzhou.aliyuncs.com/appIcon/img_3@2x.png" style="width:400rpx;height:400rpx;"></image>
        </view>
        <view>还没有报废网点</view>
      </view>
    </view>
  </block>
</scroll-view>

<view class="cu-modal {{isShow?'show':''}}">
  <view class="cu-dialog">
    <view class="cu-bar bg-white justify-end">
      <view class="content">网点位置</view>
      <view class="action" bindtap="hideModal">
        <text class="cuIcon-close text-red"></text>
      </view>
    </view>
    <view style="height: 50vh;">
      <map wx:if="{{isShow}}" latitude="{{latitude}}" longitude="{{longitude}}" markers='{{marker}}' style="width: 100%;height: 100%" />
    </view>
  </view>
</view>
<view class="all_stores" bindtap="stores_loc">
  <view>网点分布</view>
</view>

上面是我改正后的代码，没改正之前，一直调试scroll-view标签的样式属性之类的，网上找了一遍，也试了很多方法都不起作用，高度肯定给了，scrollview里的fixed之类的定位属性也查了，还把scrollview和view标签来回更换，始终没找到原因，本来想放弃了，结果客户又来催（我以为他们忘了这事了~）,测试的话也没苹果手机，这就导致调试起来比较困难，模拟器肯定都没问题的，就是真机才会出现。
今天找同事借了苹果手机（整个公司就他自己有苹果手机），将代码一点点注释掉，终于定位到问题所在模块，就是模态框里的地图组件，map组件里面有个display和position属性影响到了scrollview,之前网上说scrollview里面不能有这种定位属性，我就想当然在里面找，没想到这种同级别的标签也会影响到。

解决方案

找到问题了，剩下的就好解决了，既然是map组件里的样式导致的额，那我判断下模态框是否显示就好了，模态框显示时才将map显示，在map里加个判断，然后体验版测试了下果然可以。

问题总结

必须让公司招个前端，现在这个项目是后端、前端、测试、运维、评估需求都是我做，心累~，本来是个小问题，我前几天有时间就看这个问题，明明一点点注释掉代码就能定位到问题，我却耽误这么长的时间才解决，看来解决bug的能力有待提高。

小程序开发中苹果手机列表滑不动问题

问题

苹果系统列表滚动不了

解决方案

问题总结