Shulou(Shulou.com)05/31 Report--

This article mainly explains "how to use the srcoll-view components in WeChat Mini Programs". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to use the srcoll-view components in WeChat Mini Programs".

Detailed explanation of the srcoll-view of WeChat Mini Programs components

First of all, show what you want to achieve. ↓ vertical scroll scrolls up and down, and horizontal scrolls left and right.

Attach the code of wxml first.

Vertical scroll horizontal scroll

1. The entire interface is packaged by a view. The class of the view is included when the quickStart is created, and can be adjusted as needed. After that, each of the two view wraps a scrollview and its text text above it.

two。 The first scroll-view needs to scroll vertically and set scroll-y= "{{true}}" for it (or write scroll-y directly). The class of the scrollview is "scroll-view-y", followed by a code. The scroll-top property sets the initial position of the scroll bar, and scrollTop declares the assignment in the data of the js file (it does not need to be removed).

There are four view without color in 3.scrollview, which have the same properties except color.

Wxss code for vertical scrollview

Height-view-y {height: 200px; width: 100%;} .cake-y-item {height: 70px; width: 100%;}

4. The horizontal direction of the scrollview is basically similar to the vertical direction, focusing on the difference.

(1) the vertical scrollview wraps 4 different color view directly, and the horizontal direction needs to wrap each color block with view first, which is to ensure the horizontal arrangement of each color block.

(2) wxss file

For the wxss code of the horizontal scrollview, scroll-view-x is the attribute of the horizontal slider and scroll-x-item is the attribute of each color block in the horizontal slider.

Width-view-x {width: 300px; height: 100px; display: flex; overflow: scroll;} .duration-x-item {width: 95px; height: 100%; display: inline-table;}

You can see:

The ① horizontal slider has two more attributes, display and overflow. Display is set to flex auto-scaling display, and overflow is set to scroll display when the child layout exceeds the parent container.

② color block display attribute is set to inline-table, which is very important! Without writing this attribute at first, it has been impossible to achieve horizontal sliding of scrollview for a long time. In my constant attempt, finally try out, very happy! Stick out your tongue

Attach the official attribute description of Wechat ↓

The default value of the attribute name type indicates that scroll-xBooleanfalse allows horizontal scrolling scroll-yBooleanfalse allows vertical scrolling upper-thresholdNumber50 to the top / left (unit px), triggers the scrolltoupper event lower-thresholdNumber50 how far from the bottom / right (unit px), triggers the scrolltolower event scroll-topNumber

Set the vertical scroll bar position scroll-leftNumber

Set horizontal scroll bar position scroll-into-viewString

The value should be a child element id (id cannot start with a number). Set which direction to scroll, in which direction to scroll to the element scroll-with-animationBooleanfalse uses animated transition enable-back-to-topBooleanfalseiOS to click on the top status bar when setting the scroll bar position, and when Android double-clicks the title bar, the scroll bar returns to the top and only vertical bindscrolltoupperEventHandle is supported.

Scrolling to the top / left triggers the scrolltoupper event bindscrolltolowerEventHandle

Scrolling to the bottom / right triggers the scrolltolower event bindscrollEventHandle

Triggered when scrolling, event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} Thank you for reading, these are the contents of "how to use the srcoll-view components in WeChat Mini Programs". After the study of this article, I believe you have a deeper understanding of how to use the srcoll-view components in WeChat Mini Programs, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.