Wechat applet development practice (1): rolling component

Time:2021-7-28

This paper mainly introduces various common functions of scroll view component, such as vertical and horizontal scrolling, scrolling events, etc., and demonstrates the use of these functions through example code
1. Vertical scroll view
Scroll view is a container component. If the sub components of the component exceed the height or width of scroll view, the component will allow the sub components to scroll the view vertically or horizontally to display other sub components that are not displayed. This section describes how to scroll vertically.
If you want the scroll view to scroll vertically, you need to set the scroll-y property value to true. For example, in the following layout code, the height of the scroll view component is set to 200px, the height of each sub view is also 200px, and four sub views are placed. In this way, the scroll view allows scrolling and other sub views are realized.
<view>

<view class="section__ Title "> scroll vertically < / View >
   <scroll-view scroll-y="true" style="height: 200px;" >
       <view id="green" class="scroll-view-item bc_green"></view>
       <view id="red"  class="scroll-view-item bc_red"></view>
       <view id="yellow" class="scroll-view-item bc_yellow"></view>
       <view id="blue" class="scroll-view-item bc_blue"></view>
   </scroll-view>

</view>

When scrolling up and down, the effect is shown in Figure 1.
Wechat applet development practice (1): rolling component
Figure 1 Effect of scroll view vertical scrolling

The initial position of the scroll view scroll bar is 0, that is, at the top. If you want to change the default position of the scroll bar, you need to set the scroll top attribute. The default attribute value of this attribute is 0, that is, the scroll bar is at the top. If the attribute value is not 0, the scroll bar will scroll down (the attribute value must be greater than 0). The following layout code sets the value of the scroll top property to 60.
<scroll-view scroll-y=”true” style=”height: 200px;” scroll-top=”60″>
… …
</scroll-view>

The display effect is shown in Figure 2. Obviously, without scrolling, a part of the red sub view is displayed (exactly 60px).
Wechat applet development practice (1): rolling component
Figure 2 Effect of setting scroll top attribute

If you want the scroll view to scroll to a child view at the beginning, you need to use the scroll into view property, which needs to specify the ID of a child view. For example, the following layout code sets the value of the scroll into view property to yellow, that is, when the system loads the scroll view component, it will directly scroll to the third sub component yellow. If the scroll top and scroll into view properties are set at the same time, the latter has higher priority.
<scroll-view scroll-y=”true” style=”height: 200px;” bindscrolltoupper=”upper” bindscrolltolower=”lower” upper-threshold=”100″ lower-threshold=”300″ bindscroll=”scroll” scroll-top=”100″ scroll-into-view=”yellow” >

… …

</scroll-view>

2. Horizontal scroll view
If you want the scroll view to scroll horizontally, you need to set the scroll-x property to true. The layout code is as follows:
<view>

<view class="section__ Title "> scroll horizontally < / View >
 <scroll-view class="scroll-view_H" scroll-x="true" style="width: 100%">
     <view id="green" class="scroll-view-item_H bc_green"></view>
     <view id="red"  class="scroll-view-item_H bc_red"></view>
     <view id="yellow" class="scroll-view-item_H bc_yellow"></view>
     <view id="blue" class="scroll-view-item_H bc_blue"></view>
 </scroll-view>

</view>

Where scroll view_ The code of H style is as follows:
.scroll-view_H{

white-space: nowrap;

}

The display effect is shown in Figure 3.
Wechat applet development practice (1): rolling component
Figure 3 Effect of scroll view horizontal scrolling
If you want the scroll bar to stay in other positions by default, you need to set the scroll left property. For example, the following layout code sets the value of the scroll left property to 50.
<scroll-view class=”scroll-view_H” scroll-x=”true” scroll-left=”50″ style=”width: 100%”>

… …

</scroll-view>

The display effect is shown in Figure 4.
Wechat applet development practice (1): rolling component
Figure 4 Effect of setting scroll left attribute

3. Scroll to edge trigger event

The scroll view component provides some events. When the scroll bar scrolls to the top or bottom (vertical scroll) or to the left or right (horizontal scroll), two events will be triggered respectively. These two events are specified by the bindscrolltoupper and bindscrolltower properties respectively. These two properties need to specify the function name corresponding to the event. For example, the following layout code contains two scroll view components, the upper one is vertical scrolling and the lower one is horizontal scrolling.
<view>

<view class="section__ Title "> scroll vertically < / View >
     <scroll-view scroll-y="true" style="height: 200px;"   bindscrolltoupper="upper" bindscrolltolower="lower" >
        <view id="green" class="scroll-view-item bc_green"></view>
        <view id="red"  class="scroll-view-item bc_red"></view>
        <view id="yellow" class="scroll-view-item bc_yellow"></view>
        <view id="blue" class="scroll-view-item bc_blue"></view>
    </scroll-view>

     <view class="section__ Title "> scroll horizontally < / View >
     <scroll-view class="scroll-view_H" scroll-x="true"  scroll-left="50" style="width: 100%"
         bindscrolltoupper="upper" bindscrolltolower="lower" >
             <view id="green" class="scroll-view-item_H bc_green"></view>
             <view id="red"  class="scroll-view-item_H bc_red"></view>
             <view id="yellow" class="scroll-view-item_H bc_yellow"></view>
             <view id="blue" class="scroll-view-item_H bc_blue"></view>
     </scroll-view>

</view>

In the layout code above, bindscrolltoupper specifies the upper method and bindscrolltower specifies the lower method. These two methods need to be implemented in the index.js file. The code is as follows:
var app = getApp()
Page({

… …

upper: function(e) {

 console.log(e)

},
lower: function(e) {

 console.log(e)

},
})

In both methods, the parameter E is simply output. When sliding the scroll bar horizontally or vertically, the system will trigger corresponding events according to the position of the scroll bar. For example, figure 5 shows the input log that scrolls vertically to the lowest end, then to the top, and horizontally to the back end, and then to the left end.
Wechat applet development practice (1): rolling component
Figure 5 output log scrolling to the edge
So, there is another problem, how does the system determine when it scrolls to the edge? In fact, this is determined by two other attributes, upper threshold and lower threshold. The default value for these two properties is 50, which is almost the length of the scroll bar. By default, when one end of the scroll bar just touches the upper, lower, left and right edges, the corresponding event will be triggered. If you want to change the default values of these two properties, the scroll bar may scroll to other positions to trigger the corresponding event. For example, the following code sets the value of the upper threshold property to 100 and the value of the lower threshold property to 300.
<scroll-view scroll-y=”true” style=”height: 200px;” bindscrolltoupper=”upper” bindscrolltolower=”lower” upper-threshold=”100″ lower-threshold=”300″>

… …

</scroll-view>

For vertical, by default, the scroll bar will be in the position shown in Figure 6 to trigger the lower edge scroll event. However, if the value of the lower threshold attribute is 300, the scroll bar will be in the position shown in Figure 7, and the lower edge scroll event will be triggered.

Wechat applet development practice (1): rolling component
Figure 6 the position where the lower threshold event is triggered when the lower threshold attribute is the default value

Wechat applet development practice (1): rolling component
Fig. 7 position of triggering the lower edge scrolling event when the lower threshold attribute is 300
4 scrolling events

Scroll view can not only monitor the events at the edge of the scroll bar, but also monitor the scrolling status of the scroll bar in real time. This is the scrolling event. It is set with the bindscroll property. The value of this property is the function name corresponding to the scrolling event. For example, the following code sets the bindscroll property value to scroll.
<scroll-view class=”scroll-view_H” scroll-x=”true” scroll-left=”50″ style=”width: 100%”

 bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" >
     <view id="green" class="scroll-view-item_H bc_green"></view>
     <view id="red"  class="scroll-view-item_H bc_red"></view>
     <view id="yellow" class="scroll-view-item_H bc_yellow"></view>
     <view id="blue" class="scroll-view-item_H bc_blue"></view>

</scroll-view>

When the scroll bar scrolls horizontally or vertically, it will continuously trigger scroll events and call the scroll function. The code of this function is as follows:
scroll:function(e)
{
console.log(e.detail)
}

Information related to scrolling can be obtained through the detail attribute in the e parameter. The detail attribute can provide the following six values.

  • Scrollleft: the current position of the scroll bar when scrolling horizontally. The value is 0 when scrolling vertically.
  • Scrolltop: the current position of the scroll bar when scrolling vertically. The value is 0 when scrolling horizontally.
  • Scrollheight: the total height of all sub views (including the spacing between sub views) when scrolling vertically. When scrolling horizontally, this value is the height of the scroll view component.
  • Scrollwidth: the total width of all child views (including the spacing between child views) when scrolling horizontally. When scrolling vertically, this value is the width of the scroll view component.
  • Deltax: the increment when scrolling horizontally, that is, the distance from the current scroll bar position to the new position. Move horizontally from left to right, the value is less than 0, and move horizontally from right to left, the value is greater than 0. The direction of horizontal movement can be judged by this attribute value.
  • Delta Y: the increment when scrolling vertically, that is, the distance from the current scroll bar position to the new position. Move vertically from top to bottom, the value is less than 0, and move vertically from bottom to top, the value is greater than 0. The direction of vertical movement can be determined by this attribute value.

Fig. 8 is the log information that triggers the scroll event output during vertical and horizontal scrolling, which also includes the log information that scrolls to the edge output.
Wechat applet development practice (1): rolling component
Figure 8 log output during scrolling

Get more free learning resources, please add WeChat official account: geek origin.

This paper is based on the operation tool platform of blog group sending one article and multiple sendingOpenWriterelease