• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >axure > 自定义微信元件库:Axure基本元件的应用(下)

自定义微信元件库:Axure基本元件的应用(下)

作者: @ Axure原型设计工场 字体:[增加 减小] 来源:互联网 时间:2017-06-13

本文主要包含axure自定义部件库,axure自定义形状,pscad自定义元件,multisim自定义元件,cadworx自定义元件等相关知识, @ Axure原型设计工场 希望在学习及工作中可以帮助到您

阅读本篇之前,如果没有了解上篇,请点击这里查看《自定义微信元件库:Axure基本元件的应用(上)?》。

下篇讲解的是微信以下自定义元件的实现过程:

  • 弹出菜单
  • 消息列表样式
  • 功能菜单
  • 文字输入工具栏
  • 语音输入工具栏
  • 微信导航菜单

弹出菜单

为了更通用,可以使用中继器来实现,菜单数根据中继器的数据多少,自动显示对应的菜单。

  • 添加一个中继器,命名menus
  • 给中继器menus添加两个属性menu_id和menu_name,三条数据

  • 双击中继器menus进入编辑状态,设置矩形框名称为menu_item,修改默认矩形框的样式,大小为300*50,只保留下边框,边框颜色为浅灰色。

  • 设置矩形的交互样式的鼠标按下状态时背景为深灰色

  • 修改中继器的“每项加载时”事件

  • 选中中继器menus,右键转换为动态面板,命名为popup_menu,设置动态面板的“固定到浏览器”属性为水平居中和垂直居中

  • 最后,像弹出窗口一样,设置弹出菜单默认为隐藏状态

在使用时,显示此动态面板,并设置为“灯箱效果”即可。

如果想添加多个菜单项,只需要添加中继器的数据,样式不需要修改。

消息列表样式

消息列表里每一项有一个头像,好友名称/群名称/公众号名称等,以及最后一条消息的内容和消息时间。

同样,对于这样的列表类数据,我们建议使用中继器来实现。

  • 添加个中继器,命名为msg_list,双击中继器进入编辑状态,选择默认的矩形框,命名为msg_item,调整大小480*80,保留下边框,颜色为浅灰色,设置交互样式里鼠标按下时背景为深灰色

  • 添加消息中的几个元件,一个头像和三个文本标签
  1. 添加一个占位符,大小55*55,放在矩形框左侧作为头像,双击设置文本为“头像”;
  2. 添加一个文本标签,命名为txtName,文字大小为20,放在头像右侧;
  3. 添加一个文本标签,命名为txtLastMsg,表示最后一条消息,放在txtName下方,文字大小14,灰色;
  4. 添加一个文本标签,命名为txtDatetime,表示最后一条消息的发送时间,放在背景框最右侧;

  • 准备几条模拟数据,在实际使用时,根据需要多添加些数据

双击标题栏,添加了4列数据如下:

  • 修改中继器的“每项加载时”事件,分别设置元件对应的列信息,预览效果如下

功能菜单

同样,功能菜单和上面的消息列表非常的类似,我们也使用中继器来完成。

  • 添加一个中继器,命名为menu_list,双击中继器进入编辑状态,选择默认的矩形框,命名为menu_item,调整大小480*56,白色背景,保留下边框,颜色为浅灰色,设置交互样式里鼠标按下时背景为深灰色

  • 添加功能菜单中的图标和菜单名

添加一个占位符,大小32*32,放在矩形框左侧作为菜单图标;

添加一个文本标签,命名为txtMenuName,文字大小为18,放在图标右侧;

  • 添加中继器数据,实际使用根据需要修改

  • 修改中继器menu_list的“每项加载时”事件

文字输入工具栏

在发送消息时,我们可以选择输入文字,或者语音输入,先说一下文字输入工具栏。

  • 添加个有边框矩形,大小480*55,背景色取自微信截图,保留上、下边框,边框色为灰色

  • 从微信截图中截取语音、表情和加号图标,再复制一份前面设计的文本输入框元件

  • 摆放好各个图标位置,调整文本输入框的宽度为300,取消默认的文本输入提示

您可能想查找下面的文章:

  • 自定义微信元件库:Axure基本元件的应用(下)
  • 自定义微信元件库:Axure基本元件的应用(上)

相关文章

  • 2017-06-14高手在民间 | 手把手教你用Axure制作连连看游戏(附游戏地址)
  • 2017-06-13Axure中继器姊妹篇:列表页添加排序和筛选功能
  • 2017-06-13Axure教程:用中继器和日期函数实现万年历
  • 2017-06-13Axure教程:微信聊天列表原型制作(二)
  • 2017-06-13Axure教程:可使用的计算器demo制作(下)
  • 2017-06-13Axure教程丨制作自己的Axure元件库
  • 2017-06-13Axure RP8 动态面板之折叠和展开(例如菜单栏)
  • 2017-06-14Axure教程 | 原型中的商品图放大镜效果
  • 2017-06-13Axure教程:怎样做低保真轨迹追踪与回放
  • 2017-06-14Axure操刀微信H5页面之《加密情书》的交互设计

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • Axure RP8 动态面板之轮播图设置
    • Axure教程:原型设计之弹幕
    • Axure7.0教程(五)鼠标Cursor函数的使用(动态面板跟随)
    • 自定义微信元件库:Axure基本元件的应用(上)
    • banner轮播axure最简易实现及手动切换
    • 五分钟教你快速上手Axure交互设计
    • Axure原型设计,单读APP原型分享
    • Axure教程 | 图片放大器
    • 用Axure模拟一个数字抽奖的小游戏
    • Axure7.0教程(四)中继器的使用(4)

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有