Mastering Swiper, Scroll-View, and View Containers in Mini Programs

Swiper View Container

Code Structure

<swiper>
    <swiper-item>
      <image src="{{item}}"/>
    </swiper-item>
    ...
</swiper>

Only components can be placed; other nodes will be automatically removed.

Attributes

indicator-dots : Whether to display panel indicator dots.

autoplay : Whether to switch automatically.

current : Index of the current page.

interval : Automatic switch interval.

duration : Slide animation duration.

bindchange : Event triggered after sliding.

Scrollable View Area (scroll-view)

Code Structure

<scroll-view>
    <view>...</view>
    ...
</scroll-view>

Attributes

scroll-x, scroll-y : Enable horizontal or vertical scrolling.

upper-threshold, lower-threshold : Pixels from top/left (bottom/right) that trigger scrolltoupper event.

scroll-top, scroll-left : Set vertical/horizontal scrollbar position.

scroll-into-view : Scroll to element with specified ID.

bindscrolltoupper : Event handler for scrolling to top/left.

bindscrolltolower : Event handler for scrolling to bottom/right.

bindscroll : Event handler for scrolling.

View Container (view)

Code Structure

No fixed structure; can wrap other components, similar to HTML DIV. <view>...</view> The view component is mainly for layout, with flexible arrangement such as:

Horizontal arrangement
flex-direction:row;

Vertical arrangement
flex-direction:column;

More layout options can be found in the source code.

Source Code Download

Send the message ‘ 03 ’, and you will automatically receive the download link.

Click “Read Original” to view the article list.