WeChat Applet
Mini Program Development
Detailed explanation of scroll-view component of WeChat applet
Detailed explanation of scroll-view component of WeChat applet
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!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1676
14
1429
52
1333
25
1278
29
1257
24
Develop WeChat applet using Python
Jun 17, 2023 pm 06:34 PM
With the popularity of mobile Internet technology and smartphones, WeChat has become an indispensable application in people's lives. WeChat mini programs allow people to directly use mini programs to solve some simple needs without downloading and installing applications. This article will introduce how to use Python to develop WeChat applet. 1. Preparation Before using Python to develop WeChat applet, you need to install the relevant Python library. It is recommended to use the two libraries wxpy and itchat here. wxpy is a WeChat machine
Implement card flipping effects in WeChat mini programs
Nov 21, 2023 am 10:55 AM
Implementing card flipping effects in WeChat mini programs In WeChat mini programs, implementing card flipping effects is a common animation effect that can improve user experience and the attractiveness of interface interactions. The following will introduce in detail how to implement the special effect of card flipping in the WeChat applet and provide relevant code examples. First, you need to define two card elements in the page layout file of the mini program, one for displaying the front content and one for displaying the back content. The specific sample code is as follows: <!--index.wxml-->&l
Alipay launched the 'Chinese Character Picking-Rare Characters' mini program to collect and supplement the rare character library
Oct 31, 2023 pm 09:25 PM
According to news from this site on October 31, on May 27 this year, Ant Group announced the launch of the "Chinese Character Picking Project", and recently ushered in new progress: Alipay launched the "Chinese Character Picking-Uncommon Characters" mini program to collect collections from the society Rare characters supplement the rare character library and provide different input experiences for rare characters to help improve the rare character input method in Alipay. Currently, users can enter the "Uncommon Characters" applet by searching for keywords such as "Chinese character pick-up" and "rare characters". In the mini program, users can submit pictures of rare characters that have not been recognized and entered by the system. After confirmation, Alipay engineers will make additional entries into the font library. This website noticed that users can also experience the latest word-splitting input method in the mini program. This input method is designed for rare words with unclear pronunciation. User dismantling
Can small programs use react?
Dec 29, 2022 am 11:06 AM
Mini programs can use react. How to use it: 1. Implement a renderer based on "react-reconciler" and generate a DSL; 2. Create a mini program component to parse and render DSL; 3. Install npm and execute the developer Build npm in the tool; 4. Introduce the package into your own page, and then use the API to complete the development.
Internet Explorer opens Edge: How to stop MS Edge redirection
Apr 14, 2023 pm 06:13 PM
It's no secret that Internet Explorer has fallen out of favor for a long time, but with the arrival of Windows 11, reality sets in. Rather than sometimes replacing IE in the future, Edge is now the default browser in Microsoft's latest operating system. For now, you can still enable Internet Explorer in Windows 11. However, IE11 (the latest version) already has an official retirement date, which is June 15, 2022, and the clock is ticking. With this in mind, you may have noticed that Internet Explorer sometimes opens Edge, and you may not like it. So why is this happening? exist
How uniapp achieves rapid conversion between mini programs and H5
Oct 20, 2023 pm 02:12 PM
How uniapp can achieve rapid conversion between mini programs and H5 requires specific code examples. In recent years, with the development of the mobile Internet and the popularity of smartphones, mini programs and H5 have become indispensable application forms. As a cross-platform development framework, uniapp can quickly realize the conversion between small programs and H5 based on a set of codes, greatly improving development efficiency. This article will introduce how uniapp can achieve rapid conversion between mini programs and H5, and give specific code examples. 1. Introduction to uniapp unia
What should I do if win11 cannot use ie11 browser? (win11 cannot use IE browser)
Feb 10, 2024 am 10:30 AM
More and more users are starting to upgrade the win11 system. Since each user has different usage habits, many users are still using the ie11 browser. So what should I do if the win11 system cannot use the ie browser? Does windows11 still support ie11? Let’s take a look at the solution. Solution to the problem that win11 cannot use the ie11 browser 1. First, right-click the start menu and select "Command Prompt (Administrator)" to open it. 2. After opening, directly enter "Netshwinsockreset" and press Enter to confirm. 3. After confirmation, enter "netshadvfirewallreset&rdqu
The end of an era: Internet Explorer 11 is retired, here's what you need to know
Apr 20, 2023 pm 06:52 PM
June 15, 2022 is the day when Microsoft ends support for Internet Explorer 11 (IE11) and closes its legacy browser chapter. The company has been reminding users of this end-of-life date for some time and calling on them to plan a move to Microsoft Edge. Microsoft bundles IE11 with Windows 8.1 as the modern default web browser for Windows. Although it never reached the (current) heights of Chrome, it was the second most used desktop browser in 2014, behind IE8. Of course, with 20
