Introduction :
Repeater has 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
Dynamically becomes 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.
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.
如果觉得我的教程做的不错呢，欢迎关注、收藏、转发、捐赠，谢谢。