vue-wechat用vue.js开发微信app界面的demo 线上地址: vue-wechat. 项目地址: useryangtao/vue-wechat 安装
技术栈vue-wechat是主要在利用Vue.js * 实现了微信app及很多细节。 此demo在实现上使用了以下技术
一些亮点新页面跳转的过渡动画 参照ios系统的页面切换风格,是通过router-view及transition特性结合实现的。 消息列表页的item 左划操作处理,使用vuex(getters,actions)实现实时处理计算数据 (语音/文字)对话框 组件间 动画切换,还有通过事件注册tap 实现 按住说话效果; 还有一些交互行为细节及动画:
朋友圈下拉拖拽显示完整封面 listview部分也使用了weui的结构。 小图标全部使用iconfont方式,减少图片请求。 手机预览(QR)
基本操作主页 及消息列表 (未读/已读)操作 及 删除页面切换,动画过渡(仿照ios系统切换风格:下一页打开时,当前页左偏移-30%;当前页关闭时,上一页左偏移从-30%过渡到0%) 按下说话,松开结束 效果发现-朋友圈发现-扫一扫图标-iconfont为了减少图片加载,图标使用的iconfont添加到主屏幕开发约定
参考关于作者微博:Water杨涛 |
|