AxureRP7.0从入门到精通(连载42)

Axure书籍 小楼一夜听春语 11144℃ 0评论

3. 项目列表操作

苏苏:我想做个商品列表。

小楼:好啊!

苏苏:要能按照销量排序。

小楼:好啊!

苏苏:要能按照价格排序。

小楼:好啊!

苏苏:要能按照品牌筛选。

小楼:好啊!

苏苏:要能……

小楼:你就说你想仿个淘宝不就行了?

苏苏:不是……

小楼:……

苏苏:是京东……

 

3.1.  排序

项目列表在展示时默认是将所有的项按照数据集中行的顺序进行展示。不过,项目列表也能通过相应的动作控制展现形式。比如按照不同的列进行升降序排列、按照不同的条件显示筛选结果等。

这里我们预先准备一个商品列表,包含:图片、商品名称、价格、销量,我们就以这个列表为例进行排序设置。(图6-35)

图6-35

(图6-35)

 

案例:按销量排序

点击“销量”按钮时,根据用户习惯只需要让商品按销量降序排列。实现步骤如下(图6-36):

1、双击“销量”按钮的【鼠标单击时】事件,打开用例编辑界面;

2、设置动作【添加排序】;

3、勾选中继器【goodslist】;

4、添加这个排序规则的名称,随意设置一个名称即可;

5、选择排序所依据的列;

6、选择列值的类型,这里是根据销量排序,类型为【Number】;

7、选择排序的顺序为【降序】。

图6-36

(图6-36)

 

案例:按价格排序

点击价格时,根据用户的习惯先展示按价格升序的排列方式,即价格最低的靠前。当再次点击价格时,要切换排序的顺序为降序。多次点击价格按钮时,则在两种顺序间进行切换展示。

具体实现步骤如下(图6-37):

1、双击“价格”按钮的【鼠标单击时】事件,打开用例编辑界面;

2、设置动作【添加排序】;

3、勾选中继器【goodslist】;

4、添加这个排序规则的名称,随意设置一个名称即可;

5、选择排序所依据的列;

6、选择列值的类型,这里是根据销量排序,类型为【Number】;

7、选择排序的顺序为【切换】;默认顺序为【升序】。

图6-37

(图6-37)

   大家应该能够发现,与前一个案例“按销量排序”比较,这个案例只是在第7步略有不同。所以,排序的设置比较简单,只要仔细的选择好各个选项。

最后,给大家说一下排序的类型。

排序的类型一共有五种(图6-38):

Number数值类型;

Text文本类型(不支持中文);

Text(Case Sensitive):区分大小写的文本类型(不支持中文);

Date-YYYY-MM-DD日期类型,格式为2015-06-21;

Date-MM/DD/ YYYY日期类型,格式为06/21/2015。

图6-38

(图6-38)

   最后,如果需要取消排序,可以在动作列表中选择【移除排序】,然后勾选取消排序的中继器,在界面右下角输入排序的名称即可取消排序;或者勾选【全部】则能够取消所有排序。

排序可以同时存在,比如:按销量降序排序,销量相同时按价格升序排序。这种情况时需要先做价格排序,然后在排序后的项目列表上再做销量排序。也就是说主要排序要放在后面添加。


~~~~~~~~~~~~ 正文结束 下面没了 ~~~~~~~~~~~~

小楼老师再出新作,倾力打造Axure RP 8精品课程系列,以最短的时间高效完成学习目标,入门进阶与实战案例并重,是0基础的新手从入门到精通的必备课程。

《AxureRP 8 入门与实战 - 入门篇》------从零入门进阶的最佳课程------【点此查看详情】

《AxureRP 8 入门与实战 - 案例篇》------实战手册图书的同步视频------【点此查看详情】


转载请注明:Axure原创教程网 » AxureRP7.0从入门到精通(连载42)

喜欢 (24)or分享 (0)
发表我的评论
取消评论

表情

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

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(1)个小伙伴在吐槽
  1. 为啥主要排序要放在后面??
    Jonah2017-03-14 20:49 回复