小程序scroll-view组件滑屏

最新推荐文章于 2023-02-04 18:18:29 发布

Gai8043

最新推荐文章于 2023-02-04 18:18:29 发布

阅读量210

点赞数 1

本文链接：https://blog.csdn.net/HuYiMin1998/article/details/113123988

版权

<swiper  onChange="onChange" style="width:714rpx;height:{{scrollimgheight}}rpx;position:relative;margin-top:{{imgmargin}}rpx;">
        <swiper-item>
          <scroll-view catchTouchStart="start" catchTouchMove="move" catchTouchEnd="end">
           <view  style="width:714rpx;height:{{scrollimgheight + 10}}rpx;position:relative;" class="flexs">
              <block a:for="{{goodsArr}}">
                <view  style="{{item.transition}}" class="item" >
                    <image mode="scaleToFill" style="width:{{scrollimgwidth}}rpx;height:{{scrollimgheight}}rpx;border-radius:{{isRadius == 1 ? 24 : 0}}rpx;" src="{{item.Imgs}}"/>
                    <block a:for="{{item.requ}}" a:for-item="items" a:for-index="indexs">
                      <view onTap="onClickBaby" data-url="{{items.href}}" style="width:{{(scrollimgwidth/item.image_width) *  items.width}}rpx;height:{{(scrollimgheight/item.image_height) * items.height}}rpx;position: absolute;top:{{(scrollimgheight / item.image_height) *items.top}}rpx;left:{{(scrollimgwidth/item.image_width)*items.left}}rpx;"></view>
                    </block>
                </view>
              </block>
            </view>
          </scroll-view>
        </swiper-item>
        <swiper-item></swiper-item>
    </swiper>

在scroll外面加一层swiper之间和在scroll中加 catchTouchStart=“start” catchTouchMove=“move” catchTouchEnd="end"能解决滑屏问题。