微信小程序 横向滑动图片

       在微信小程序中想要实现横向滑动图片列表这个功能,主要是依靠小程序中的scroll-view可滚动视图区域来实现,这个可以上下滚动也可以实现左右滚动,只需要设置参数就可以了,关键在于scroll-view中的参数设置,scroll-view中有参数scroll-x默认为false,表示是否支持横向滑动,并且还需要关注的就是scroll-view中的view需要横向放置即设置display:flex,flex容器中默认参数有个flex-dirextion为row表示横向放置,因此不用设置flex-direction就能实现效果了。

        接下来我们一步步来实现想要的目的,首先我们先放六张图片,然后我们使用view将这个六个image包括起来,横向放置

微信小程序 横向滑动图片_第1张图片

这个时候 当一个大的view把六张图片包含起来之后,并且设置display:flex之后图片已经能横向放置了,但是并不能左右滑动,右边的图片也不能显示,之后我们添加scroll-view,并且把scroll-x设置为true之后

  

  
    
      
      第{{index}}个
    
  



.view_list{
  width: 100%;
  height: 200rpx;
  text-align: center;
  display: flex;
}
.mypic{
  width: 200rpx;
  height: 200rpx;
}

微信小程序 横向滑动图片_第2张图片

就能发现结果图片已经能够横向滑动了, 至此已经实现了图片横向滑动的功能,其他的细节就可以随便修改了。

 

你可能感兴趣的:(小程序)