scroll-view踩坑简记

小程序scroll-view标签没有实现横向滚动的问题及解决方法记录

scroll-view用于定义可滚动视图

【1】使用scroll-view做图片横向滚动，发现图片无法滚动，宽度被压缩

问题代码（仅贴出关键部分）：

<scroll-view class='scrollEmoPic' scroll-x="true" >
   <button class='emoPicUpload' bindtap='bindAddEmo'>
      <view style='margin:0 30rpx'>相册</view>
   </button>
   <button class=' emoPicUpload' bindtap='bindInsertEmo'>
      <view style='margin:0 30rpx'>上传</view>
   </button>   
  <block wx:for="{{EmoPic}}">
     <image class='scrollemoPicitem' src="{{item.url}}" bindtap='bindEmoPicChoose' data-src="{{item.url}}" />       
  </block>
</scroll-view>

关键样式：

.scrollEmoPic{flex-wrap: nowrap;display: flex}
.scrollemoPicitem{width: 100rpx; height: 100rpx; margin: 10rpx 10rpx;}

问题所在：scroll-view标签下需要被滚动的内容项应为view标签

解决方法：使用view标签将图片、按钮等其他标签包括起来

【2】模拟器及安卓机中能正常横向滑动，iPhone6下却无法滑动

解决方法：scroll-view外层的view标签定义width：100%（我也不知道这是什么原因）