ios系统微信小程序scroll-view划不动的问题

这段时间开发个微信小程序的点餐系统，因为只需要小程序版本，所以就用原生的小程序写了，过程中遇到了几个问题和坑，就总结一下，方便来后者。

商品分类和商品列表的左右联动，像美团和饿了么那样的交互，点击某个分类滑动到对应的商品列表，随意滑动商品列表商品分类也会做对应的切换，我个人的实现方案如下：

• 要用到scroll-view的to-view属性
• 每个商品的高度都是固定的，所以要开始计算好每个类目对应的商品列表的高度，在滑动商品的时候实时获取scrollTop,然后再让商品分类列表做对应的切换

主要代码如下：

<scroll-view scroll-y class="right-cont" scroll-into-view="{{toView}}" scroll-with-animation catchscroll="scrollViewList" enhanced bounces="{{bounces}}">
    <!-- id给toview使用的 -->
    <view wx:for="{{menu_list}}" wx:key="unique" wx:for-index="idx" wx:for-item="itemName"  id="{{'order'+idx}}"></view>
</scroll-view>

js代码我就不贴了，实现方法已经说了，就是那么做就没问题

下面说一下几个坑：

1.scroll-view里面不能使用position：fixed的元素，不然不可见，试一下就知道了；

2.因为ios系统默认有弹性滑动，所以scroll-view滑动的时候有个bug，从scroll-view外面滑进去，再滑动scroll-view就划不动，必须要等个一两秒，我把网上的两种主流方法都试了，第一种就是在.json里面配置：

"enablePullDownRefresh": false,
  "disableScroll":false,

没啥用；第二种说是要给scroll-view加上宽高以及设置ovewflow:scroll,也没用，scroll-view是不需要设置overflow样式的，只需要配置标签属性overflow-y就行了；

那然后我就只能想到一种解决办法了，就是给scroll-view外面的元素加上touchmove方法，然后return false,就是告诉内核在这些元素上滑动不要干任何事情，然后完美解决，代码如下：

<view class="bottom_box" catchtouchmove="bottomTouchMove" id="bottomBox"></view>

 bottomTouchMove() {
    return false
  },

一定要用catch绑定方法，阻止冒泡到父元素。

大概就先记这些吧！

最后

以上就是妩媚抽屉为你收集整理的ios系统微信小程序scroll-view划不动的问题的全部内容，希望文章能够帮你解决ios系统微信小程序scroll-view划不动的问题所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。