This article mainly introduces the relevant information about the detailed explanation of the scroll-view of the WeChat applet component. I hope this article can help everyone understand and master this part of the content. Friends in need can refer to it. I hope it can help everyone.
Detailed explanation of srcoll-view of WeChat mini program component
Today I will record the problems and solutions encountered in scroll-view learning, hoping to be helpful to other students helped.
First show the effect you want to achieve. ↓ vertical scroll implements up and down scrolling, and horizontal scroll implements left and right scrolling.
First attach the wxml code.
<view class="container"> <view> <text>vertical scroll</text> <scroll-view scroll-y class="scroll-view-y" scroll-top="{{scrollTop}}"> <view id="green" class="scroll-y-item bg_green"></view> <view id="red" class="scroll-y-item bg_red"></view> <view id="blue" class="scroll-y-item bg_blue"></view> <view id="yellow" class="scroll-y-item bg_yellow"></view> </scroll-view> </view> <view> <text>horizontal scroll</text> <scroll-view scroll-x class="scroll-view-x" style="width:100%"> <view class="scroll-view-x"> <view class="scroll-x-item bg_green"></view> <view class="scroll-x-item bg_red"></view> <view class="scroll-x-item bg_blue"></view> <view class="scroll-x-item bg_yellow"></view> </view> </scroll-view> </view> </view>
1. The entire interface is packaged by a view. The class of this view is provided when quickStart is created, and can be adjusted as needed. After that, the two views each wrap a scrollview and the text above it.
2. The first scroll-view needs to scroll vertically, set scroll-y="{{true}}" (or write scroll-y directly). The class of this scrollview is "scroll-view-y", and the code will be attached later. The scroll-top attribute sets the initial position of the scroll bar, and scrollTop is declared in the data of the js file (can be removed if not required).
3. The four views in scrollview that do not use colors have the same attributes except color.
is the wxss code of the vertical scrollview
.scroll-view-y { height: 200px; width: 100%; } .scroll-y-item { height: 70px; width: 100%; }
4. The horizontal scrollview is basically similar to the vertical scrollview. Let’s focus on the difference.
(1) The scrollview in the vertical direction directly wraps 4 views of different colors. In the horizontal direction, each color block needs to be wrapped with a view first. This is to ensure that the color blocks are arranged horizontally.
(2) wxss file
is the wxss code of the horizontal scrollview, scroll-view-x is the attribute of the horizontal slider, scroll-x-item is each item in the horizontal slider Properties of the color block.
.scroll-view-x { width: 300px; height: 100px; display: flex; overflow: scroll; } .scroll-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, and overflow is set to scroll when the child layout exceeds the parent container.
②The display attribute of the color block is set to inline-table. This is very important! ! ! I didn't write this attribute at the beginning, and I couldn't realize the horizontal sliding of the scrollview for a long time. After my constant attempts, I finally tried it out, and I’m very happy! Stick out your tongue
Attached is the WeChat official attribute description↓
Attribute name | Type | Default value | Description |
---|---|---|---|
scroll-x | Boolean | false | Allow horizontal scrolling |
scroll-y | Boolean | false | Allow vertical scrolling |
upper-threshold | Number | 50 | How far away from the top/left (unit px) is the scrolltoupper event triggered |
lower-threshold | Number | 50 | How far away from the bottom/right (unit px) is to trigger the scrolltolower event |
scroll-top | Number | Set the vertical scroll bar position | |
scroll-left | Number | Set the horizontal scroll bar position | |
scroll-into-view | String | The value should be a child element id (the id cannot start with a number). Set which direction can be scrolled, then scroll to the element in which direction | |
scroll-with-animation | Boolean | false | Use animated transitions when setting scroll bar position |
Boolean | false | iOS When clicking the top status bar or double-clicking the title bar on Android, the scroll bar returns to the top and only supports vertical orientation | |
EventHandle | Scroll to the top/left, the scrolltoupper event will be triggered | ||
EventHandle | Scroll to the bottom/right, Will trigger scrolltolower event | ||
EventHandle | Triggered when scrolling, event.detail = {scrollLeft, scrollTop, scrollHeight , scrollWidth, deltaX, deltaY} |
4 recommended articles about the scroll-view component
Detailed explanation of the method of scroll-view to complete the list page
Introduction to the method of implementing scroll-view to hide the scroll bar in WeChat applet development
The above is the detailed content of Detailed explanation of scroll-view component of WeChat applet. For more information, please follow other related articles on the PHP Chinese website!