Cocos Creator is a popular game development engine with a wealth of components and tools. The PageView component is an important component used to achieve paging view effects. It allows us to implement various paging view effects in the game, such as guide pages, carousels, etc.
Table of contents
1. Component introduction
The PageView component is a component provided by Cocos Creator to achieve the paging view effect. By setting the properties and events of the PageView component, you can achieve various paging view effects, such as sliding direction, page turning effect, automatic page turning, etc.
2. Component properties
| Attributes | Function Description |
|---|---|
| Content | It is a node reference used to create the scrollable content of the PageView |
| Size Mode | Each page size type in the page view, currently there are Unified and Free types. |
| Direction | Page view scroll direction |
| Scroll Threshold | Scroll threshold, the default unit is percentage. When dragging exceeds this value, releasing will automatically scroll to the next page. If it is less than this value, it will restore. |
| Auto Page Turning Threshold | Fast sliding page turning critical value. When the user slides quickly, a speed value will be calculated based on the distance and time between the start and end of the sliding. This value is compared with this critical value. If it is greater than the critical value, the page will be turned automatically. |
| Inertia | Whether to enable rolling inertia |
| Brake | After turning on inertia, how quickly scrolling stops after the user stops touching. 0 means never stop, 1 means stop immediately. |
| Elastic | Boolean value, whether to rebound |
| Bounce Duration | Floating point number, the time required for rebound. The value range is 0-10 |
| Indicator | Page view indicator component |
| Page Turning Speed | The time required to turn each page, unit: seconds. |
| Page Turning Event Timing | Set the sending timing of PageView and PageTurning events |
| Page Events | Array, event callback function of scroll view |
| Cancel Inner Events | Boolean value, whether to cancel touch events registered on child nodes during scrolling behavior |
3. Component usage
- Create PageView component
Create a new scene or node in Cocos Creator. Then, select the PageView component from the Node menu to add it to the scene or node. You can also add components by right-clicking in the scene editor and selecting Add Component.
- Set PageView properties
After adding the PageView component, you need to set its properties. You can open the Property Inspector by clicking on the PageView component in the scene editor. In the property inspector you can change the PageView's properties, for example:
- Content node: This is the container node for all pages contained in the PageView. You can set the Content node to any node, but it is recommended to set it to a "Layout" node in order to manage the layout of all pages.
- Page Node: This is the node for each page contained in the PageView. You can set the Page node to any node, but it is recommended to set it to a "Sprite" node so that the image can be displayed.
- Indicator Node: This is the node for the indicator contained in the PageView. You can set the Indicator node to any node, but it is recommended to set it to a "Layout" node in order to manage the layout of the indicator.
- Direction: The scrolling direction of PageView. It can be horizontal or vertical.
- Autoscroll: Enabling autoscroll will make the PageView automatically scroll to the next page. You can set the time and delay for scrolling.
- Loop scrolling: Enabling loop scrolling will allow the PageView to scroll infinitely instead of stopping when the last page is reached.
- Page turning effect: Page turning effect of PageView. It can be a simple page turn, or a page turn with a zoom or fade effect.
- Add page
Adding pages in PageView is very simple. You can create a new Page node within the Content node and add it to the PageView as a child node of the Content node. You can then set the position and size of the page node to appropriate values so that it forms a complete page view with other pages.
- Add indicator
You can use the Indicator node to add an indicator to display the position of the current page in the PageView. You can add the Indicator node to the PageView and add it below the Content node as a child node of the PageView. You can then set the position and size of the indicator node to appropriate values and style the indicator as desired.
- Using PageView component
You can get the PageView component in your code and use it to scroll the page, jump to a specific page, or handle PageView events.
For example, you can use the following code to get the PageView component:
var pageView = this.node.getComponent(cc.PageView); You can then use the following code to scroll to the next page:
pageView.scrollToNextPage(); Alternatively, you can use the following code to jump to a specific page:
pageView.setCurrentPageIndex(pageIndex);4. Script Example
The following is a sample code that uses the PageView component to achieve the paging view effect:
cc.Class({
extends: cc.Component,
properties: {
pageViewNode: cc.Node, // PageView节点
pageIndicatorNode: cc.Node, // 分页指示器节点
},
onLoad () {
let pageView = this.pageViewNode.getComponent(cc.PageView);
pageView.node.on('page-turning', this.onPageTurning, this);
this.initPageIndicator(pageView);
},
initPageIndicator (pageView) {
let indicator = this.pageIndicatorNode;
let pages = pageView.getPages();
let count = pages.length;
for (let i = 0; i < count; i++) {
let node = cc.instantiate(indicator);
node.active = true;
node.parent = indicator.parent;
node.position = cc.v2((i - (count - 1) / 2) * 30, 0);
}
pageView.node.on('page-turning', (event) => {
let index = event.getCurrentPageIndex();
let children = indicator.parent.children;
for (let i = 0; i < children.length; i++) {
let child = children[i];
if (child !== indicator) {
child.color = (i === index) ? cc.Color.WHITE : cc.Color.GRAY;
}
}
}, this);
},
onPageTurning (event) {
console.log('Page Turning');
},
});Through the above code, we can dynamically create a PageView node and add the PageView component. In actual development, the code can be modified and extended as needed. It should be noted that in order to display the paging indicator, we also need to create a paging indicator node and initialize it in the code.
In short, using Cocos Creator's PageView component can help us achieve various paging view effects, such as guide pages, carousel images, etc. By setting the properties and events of the PageView component, you can achieve various paging view effects, such as sliding direction, page turning effect, automatic page turning, etc.