Detailed explanation of scroll-view component of WeChat applet-Mini Program Development-php.cn

Detailed explanation of scroll-view component of WeChat applet

小云云

Release： 2018-05-18 17:05:03

Original

17503 people have browsed it

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>

Copy after login

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%; 
}

Copy after login

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; 
}

Copy after login

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↓

##enable-back-to-topBooleanfalseiOS 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 orientationbindscrolltoupperEventHandleScroll to the top/left, the scrolltoupper event will be triggeredbindscrolltolowerEventHandleScroll to the bottom/right, Will trigger scrolltolower event bindscrollEventHandleTriggered when scrolling, event.detail = {scrollLeft, scrollTop, scrollHeight , scrollWidth, deltaX, deltaY}

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

Related recommendations:

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!