Comparison between swiper and scroll view (implementation level slider)

The most commonly used way to realize the horizontal sliding of the slider in the applet is through the scroll view. However, the sliding realized through the scroll view may not be the effect we want to achieve sometimes. Then, it can also be realized through the swiper component. The same function details can be displayed differently below~

1. Slider sliding through scroll view

2. Realize slider sliding through swiper

wxml:

<!-- ******************* scroll-view  ************************* -->
<view class="descr">use scroll-view Level of component implementation slider(slider)</view>
<scroll-view class="scrollView" scroll-x="true">
   <block wx:for="{{scrollList}}" wx:key="">
       <view class="scrollCont">{{item.scrollCont}}</view>
   </block>
</scroll-view>



<!-- ********************* swiper   ******************** -->
<view class="descr">use swiper Level of component implementation slider(slider)</view>
<!--display-multiple-items Number of sliders displayed at the same time  -->
<swiper class="swiperView" display-multiple-items='3'>
    <block wx:for="{{swiperList}}" wx:key="">
        <swiper-item>
           <view class="swiper-imgView">
               <image src="{{item.img}}" mode="aspectFill"></image>
               <text class="swiper-text">{{item.descr}}</text>
           </view>
        </swiper-item>
    </block>
</swiper>

wxss:

.swiperView,.scrollView{
  width:720rpx;
  margin: 0 auto;
}
.descr{
  height:80rpx;
  line-height: 80rpx;
  font-size: 36rpx;
  text-align: center;
  font-weight: bold;
  background-color: cornflowerblue;
  margin:20rpx 0;
  margin-top:100rpx;
}


/* slider */
.scrollView{
  white-space: nowrap;
}
.scrollCont{
   height:200rpx;
   width: 200rpx;
   display: inline-block;
   text-align: center;
   margin-right:15rpx;
   background-color: cyan;
   border:1rpx solid gainsboro;
}
/* Wheel planting */
.swiperView{
  height:200rpx;
}

.swiper-imgView{
  height: 100%;
  border:3rpx solid #fff;
  padding:0 1.5rpx;
  
}
.swiper-imgView>image{
  width:100%;
  height:100%;
}

js:

Page({
  data: {
    scrollList: [
      { "scrollCont": "Slider 1" },
      { "scrollCont": "Slider 2" },
      { "scrollCont": "Slider 3" },
      { "scrollCont": "Slider 4" },
      { "scrollCont": "Slider 5" },
      { "scrollCont": "Slider 6" },
      { "scrollCont": "Slider 7" },
      { "scrollCont": "Slider 8" },
    ],
    swiperList: [
      { "img": "https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640" },
      { "img": "https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640" },
      { "img": "https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640" },
      { "img": "https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640" },
      { "img": "https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640" },
      { "img": "https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640" }
    ]
  },
  onLoad: function () {

  }

})

 

Effect:

It can be seen from this that the slider implemented with scroll view can not be aligned in the sliding direction, while swiper can. The following illustration may be more intuitive!

For example, if I slide to the left, there are two vertical red lines in the picture above. The one above does not stay on the left line of the slider, and the one below stays on the left line of the slider. That is to say, swiper slides in blocks. Scroll view does not. Sometimes it stays on a block, which is not very friendly.~

Posted on Thu, 07 Nov 2019 12:38:44 -0500 by DrFishNips