在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称:vue-cms开源软件地址:https://gitee.com/zmxindexhtml/vue-cms开源软件介绍:这是一个Vue框架做的移动端项目用了mui,mint-ui组件项目不是很完善,多多包涵开原协议之间的区别用命令行把修改后的代码上传到码云?
制作首页App组件1.完成Header区域,使用的是Mint-UIz中的Header组件 2.制作底部的Tabbar区域,使用的是MUi的Tabbar.htm +在制作 购物车 小图标的时候,操作会繁杂一些 +先把 扩展图标的 css样式,拷贝到项目中 +拷贝 扩展字体库 ttf文件项目中 3.要在 中间区域放置一个 router-view 来展示路由匹配到的组件 改造tabbar 为 router-link设置路由高亮点击tabbar的路由链接,展示对应的路由组件制作首页轮播图布局加载轮播图数据1.获取数据,使用vue-resource发送ajax 2.使用vue-resource的this.$.http.get获取数据 3.获取到的数据,要保存在data身上 4.使用v-for循环渲染每个item项 改造六宫格区域样式改造新闻资讯链接新闻资讯页面制作1.绘制界面 使用MUI中的Midea.html绘制页面 2.使用vue-resource获取数据 3.渲染真实数据 实现新闻资讯列表 点击跳转答新群详情1.把列表中的每一项改造为 router-link 同时在跳转的时候应该提供唯一的ID标识符 2.创建新闻详情的组件页面 NewsInfo.vue 3.在路由模块中,将新闻详情的路由地址和组件页面对应起来 实现 新闻详情 的 页面布局 和数据渲染单独封装一个 comment.vue 评论子组件
2.在需要使用 comment 组件的页面中,先手动 导入 comment组件+ 'import comment from './comment.vue' 3.在父组件中,使用'components'属性,将刚才导入的comment组件,注册为自己的子组件 4.将注册自组件时候的 注册名字 以标签行驶 在页面中引用即可 获取所有的评论数据显示到页面中实现点击加载更多评论的功能1.为加载更多按钮绑定点击事件,在事件中,请求下一页数据 2.点击加载更多,让 pageIndex++,然后重新调用 this.getcomments()即可 3.为了防止新数据覆盖老数据的情况,我们在点击的时候,每当获取到新数据,应该让老数据调用数组的concat方法,拼接上新数组 发表评论1.把文本框作双向数据绑定 2.为发表按钮绑定一个事件 3.校验评论内容是否为空,如果为空提示用户重新输入 绘制图片列表 组件页面结构并美化样式
制作顶部滑动条的坑:
mui('.mui-scroll-wrapper').scroll({ deceleration: 0.0005 //flickk 减速系数,系数越大,滚动速度越慢,滚动距离越小,默认值0.0006 })
6.当 滑动条 调试OK后,发现,tabbar 无法正常工作了,这时候,我们需要把每个 tabbar 按钮的样式中 .'mui-tab-item' 重新改一下名字
制作图片列表区域
|
请发表评论