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>use scroll-view Level of component implementation slider(slider)</view> <scroll-view scroll-x="true"> <block wx:for="{}" wx:key=""> <view>{}</view> </block> </scroll-view> <!-- ********************* swiper ******************** --> <view>use swiper Level of component implementation slider(slider)</view> <!--display-multiple-items Number of sliders displayed at the same time --> <swiper display-multiple-items='3'> <block wx:for="{}" wx:key=""> <swiper-item> <view> <image src="{}" mode="aspectFill"></image> <text>{}</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.~