WeChat applet tutorial-wxapp view container scroll-view

This article mainly introduces the wxapp view container scroll-view in the mini-program tutorial, for more information about the wxapp view container scroll-view, see this article.

Related articles:

1. Mini-program tutorial-wxapp view container swiper

2. Mini-program tutorial-wxapp view container scroll-view

3. Mini-program tutorial-wxapp view container view

Scroll-view

You can scroll through the View area.

Attribute name	Type	Default value	Description
Scroll-x	Boolean	False	Horizontal Scroll allowed
Scroll-y	Boolean	False	Vertical scroll allowed
Upper-threshold	Number	50	Scrolltoupper event is triggered when the distance is from the top or left (unit: px ).
Lower-threshold	Number	50	Scrolltolower event is triggered when the node is far from the bottom or right (unit: px ).
Scroll-top	Number		Set the vertical scroll bar position
Scroll-left	Number		Set the position of the horizontal scroll bar
Scroll-into-view	String		If the value is a child element id, it is scrolled to the element and aligned to the top of the scroll area.
Bindscrolltoupper	EventHandle		Scrolltoupper event is triggered when you scroll to the top/left of the page.
Bindscrolltolower	EventHandle		Scrolltolower event is triggered when you scroll to the bottom/right side.
Bindscroll	EventHandle		Event. detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

To use vertical scrolling, you must For a fixed height, set the height through WXSS.

Sample code:

  
  
   vertical scroll
   
   
    
    
    
    
   
   
   click me to scroll into view  
   click me to scroll 
  
 
  
  
   horizontal scroll
   
   
    
    
    
    
  
 

var order = ['red', 'yellow', 'blue', 'green', 'red']Page({ data: { toView: 'red', scrollTop: 100 }, upper: function(e) { console.log(e) }, lower: function(e) { console.log(e) }, scroll: function(e) { console.log(e) }, tap: function(e) { for (var i = 0; i < order.length; ++i) {  if (order[i] === this.data.toView) {  this.setData({   toView: order[i + 1]  })  break  } } }, tapMove: function(e) { this.setData({  scrollTop: this.data.scrollTop + 10 }) }})scroll-view

Thank you for reading this article. I hope it will help you. thank you for your support for this site!

For more mini-program tutorials, see articles on the wxapp view container scroll-view!