最新消息:

[Axure Advanced Tutorial] Repeater Variable Columns

Axure高级教程 Jorkin 175浏览 0评论

Introduction :

Repeaters have become so common in Axure usage that many people are confused about not being able to change the number of columns too much. for example:

from 4 rows and 3 columns

4 rows and 3 columns

Dynamically becomes 3 rows and 4 columns

3 rows and 4 columns

As of the current version, the official has not released the relevant settings, but we can do it by changing the coordinates.

achieve the effect of changing here

The demo effect can be viewed at the link: https://5gn5xg.axshare.com/#id=b8577g&g=1

Tutorial:

Below, I will teach you how to do it:

First, we need a repeater, the layout is set to “Vertical”, and the “Grid distribution” is not selected (Wrap(Grid)):

In addition, a variable needs to be set. For the convenience of display, we use a global variable called columns. The default value is 3, indicating the initial number of columns:

Double-click the repeater to enter the modification mode and create a new interaction event on the component.

Note: is the “Loaded” of the component inside the repeater row, the event is move:

The goal is: “To (To)”

The x coordinate is: [[This.width*((Item.index-1)%columns)]]

The y coordinate is: [[-This.Height*(Math.ceil(((Item.index-1)%columns)/columns))]]

If you want to see the animation effect, you can customize Animate, and it will be cool when you change it later.

At this time, “Preview”, you can find that the effect of 4 rows and 3 columns we want has been completed.

Next, we create a new button, the text of the button is “change to 4 columns”, and the new interaction “Click or Tap” has two steps:

The first step is to “Set Variable Value” and select the “value” of the variable columns as 4.

The second step is “Fire Event”, “Add Action”, the target is the “Loaded” event of the component in the repeater.

Preview the page again, click the button “change to 4 columns”, you will find that the repeater has changed from 3 columns to 4 columns.

Summarize:

As long as the value of columns is changed first, and then the event of moving the coordinates is triggered, the number of columns can be dynamically changed.

For more Axure tutorials, please visit: http://axure.in/ Here is the most Infation Axure data station.

转载请注明:最InのAxure » [Axure Advanced Tutorial] Repeater Variable Columns

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址