Details about the sample code of the WeChat applet view container component

This article mainly introduces the details of the container components in the applet view and the relevant information about the instance code. here we will introduce the basic knowledge in detail with simple instance code, for more information about the container components in the applet view and the instance code, see this article, for more information, see

Details about the container components in the applet view:

The applet provides three view container components:,And:

1,View container

Equivalent

Tag, which has four attributes:

Hover and hover-class are related to the Click Effect: hover sets whether to enable the Click effect, while hover-class sets the Click Effect.

Hover-start-time and hover-stay-time are related to the time when the Click Effect is clicked. hover-start-time sets the delay time when the Click Effect is clicked, hover-stay-time sets the duration of the Click Effect, in milliseconds.

Create a project and test it:

Index. wxml

  
  
   1
   
  
   2
   
  
   3
  
 

Index. wxss

.flex-item{ width: 100%; height: 100px; box-sizing: border-box;}.bc_green{ background-color: green;}.bc_red{ background-color: red;}.bc_blue{ background-color: blue;}.green_hover{ border: 5px solid black;}.red_hover{ border: 5px solid black;}

The effect is as follows:

Similarly, we create a project to understand the usage of the above attributes.

Index. wxml

  
   
   
    
1
    
   
    
2
    
   
    
3
    
   
    
4
    
   
  
   
Click to scroll down
   
  
   
Click to scroll to the next sub-view
  
 

Index. wxss

.srcoll_view{ height: 200px;}.flex-item{ width: 100%; height: 100px; box-sizing: border-box;}.bc_green{ background-color: green;}.bc_red{ background-color: red;}.bc_blue{ background-color: blue;}.bc_yellow{ background-color: yellow;}.clickItem{ margin-top: 20px; background-color: grey; height: 20px; border-radius: 5px;}

Index. js

var app = getApp();var order = ['green','red', 'blue','yellow','green'];Page({ data: { scrollTop: 0, toView:"green" }, onLoad: function () { }, lower: function(e) { console.log(e) }, clickAdd:function(){ this.setData({  scrollTop: this.data.scrollTop+20 }); console.log("this.data.scrollTop:" + this.data.scrollTop); }, clickTo: function(e) { for (var i = 0; i < order.length; i++) { if (order[i] === this.data.toView) { this.setData({  toView: order[i + 1] }) break } } },})

The page effect is as follows:

Scroll-y and scroll-x"

First, we setScroll-y = "true", that is, vertical scrolling. in index. wxss, the height is set to 200px.The height is PX, which can fully accommodate two complete sub-. Scroll horizontally if scroll-x = "true" is set.

Scroll-top and scroll-left

Scroll-top indicates the vertical scroll bar position. the default value is 0. Similarly, scroll-left indicates the horizontal scroll bar position. Scroll-top = "{scrollTop}" is set in the above program, and scrollTop is obtained from the data.

For better display, give a newBind a function:

 
 
  
Click to scroll down
 

The function incrementally changes the value of scrollTop:

clickAdd:function(){ this.setData({  scrollTop: this.data.scrollTop+20 }); console.log("this.data.scrollTop:" + this.data.scrollTop); },

Therefore, each click increases by 20 for scrollTop, and 20 px is scrolled down.

Scroll-into-view

The value of scroll-into-view is the id of a child element, indicating that the element is scrolled to and the top of the element is aligned to the top of the scroll area. Scroll-into-view = "{toView}" is set in the above program, and toView is obtained from the data.

CreateAnd bind a function:

 
  
Click to scroll to the next sub-view
 1

The function is used to scroll to the corresponding child element in sequence:

clickTo: function(e) { for (var i = 0; i < order.length; i++) { if (order[i] === this.data.toView) { this.setData({  toView: order[i + 1] }) break } } },

Here, order is an array variable that stores the IDs of all child elements:

var order = ['green','red', 'blue','yellow'];

Bindscrolltolower and bindscrolltoupper

Bindscrolltolower and bindscrolltoupper bind events: bindscrolltolower is triggered when it is rolled to the bottom/right; bindscrolltoupper is triggered when it is rolled to the top/left. There is also a bindscroll that will be triggered as long as it is rolled.

Taking bindscrolltolower as an example, bindscrolltolower indicates that it is triggered when it is rolled to the bottom or right. how is this defined at the bottom or right? In this case, you need to use lower-threshold. lower-threshold indicates that the scrolltolower event is triggered when the distance from the bottom to the right (unit: px). The default value is 50, in the above code, we define lower-threshold = "100 ".The height is PX, so the last sub-Will trigger the event:

You can set the attribute values as needed. the sample code is as follows:

Swiper. wxml

Swiper. wxss

swiper{ height: 150px; width:100%;}

Swiper. js

Page({ data: { imgUrls: [ 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg', 'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg', 'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg' ], indicatorDots: true, autoplay: true, interval: 2000, duration: 500, circular:true }, change:function(e){ console.log(e); }})

Because the change function is bound, the change event is triggered every time you switch over:

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

The above is a detailed description of the sample code of the container component in the applet View. For more information, see other related articles in the first PHP community!