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绑定方法,阻止冒泡到父元素。

大概就先记这些吧!

猜你喜欢

转载自blog.csdn.net/playboyanta123/article/details/113654676