vue 打卡图片_Vue

短命女 2023-01-10 05:07 182阅读 0赞

\#制作首页App组件

1.完成 Header 区域，使用的是 Mint-UI中的Header组件

2.制作底部的 Tabbar 区域 ，使用的是MUI的Tabbar.html

在制作购物车小图标时，操作会多一些

先把扩展图标的css样式，拷贝到项目中去

还拷贝扩展字体库 ttf文件到项目中

为购物车图标添加购物车样式

3.要在中间区域放置一个 router-view 来展示路由匹配到的组件

\#\#改造 tabber 为 router-link

\#\#设置路由高亮

\#\#点击 tabber 中的路由链接，展示对应的路由组件

1.创建路由组件

2.在router.js中导入对应的路由组件

\#\#制作首页轮播图布局

\#\#加载首页轮播图数据

1.获取数据，如何获取呢(使用 vue-resource)

2.使用vue-resource 的this.$http.get获取数据

3.获取到的数据要保存到 data身上

4.使用v-for 循环渲染，每个item项

\#\#改造九宫格区域的样式

\#\#改造 新闻咨询路由链接

新闻咨询 页面制作

1.绘制界面，使用MUI中的media-list.html

2.使用vue-resource获取数据

3.渲染真实数据

\#\#实现新闻资讯列表的点击跳转到新闻详情功能

1.把列表中的每一项改造为 router-link ,同时跳转的时候应该提供一个唯一的id标识符

2.创建新闻详情的组件页面，Newsinfo.vue

3.在路由模块中，将新闻详情的路由地址和组件页面对应起来

\#\#实现 新闻详情的页面布局

\#\#单独封装一个comment.vue 评论子组件

1.先创建一个单独的comment.vue组件模板

2.在需要使用 comment 组件的页面中，先手动导入comment组件

\+import comment from './subcomments/comment.vue'

3.在父组件中使用，'components'属性，将刚才到导入 comment组件，注册为自己的子组件

4.将注册子组件时候的，注册名称，以标签的形式，在页面中引用起来

获取所有的评论数据显示到页面中

\#\#实现点击加载更多评论功能

1.为加载更多按钮，绑定点击事件，在事件中，请求下一页数据

2.点击加载更多，让pageindex++,然后重新调用this.getComments()方法重新获取最新一页的数据

3.为了防止新数据 覆盖老数据的情况，我们在点击加载更多的时候，每当获取到新数据，应该让老数据调用数组的concat方法，

拼接上新数组

\#\#发表评论

1.把文本框做双向数据绑定

2.为发表按钮绑定一个数据

3.校验评论内容是否为空，如果为空就提示，用户评论内容不能为空

4.通过v-resource 发送一个请求，把评论的内容提交给服务器

5.当发表评论ok后，重新刷新列表，以查看最新的评论

\+如果调用getComments方法重新刷新评论列表的话，可能只能得到最后一页的评论，前几页的评论获取不到

\+换一种思路：当评论成功后，在客户端，手动拼接一个 最新的评论对象，然后 调用数组的unshift那个方法

把最新的评论追加到data中newscommentslist数组的开始处；这样就能完美实现刷新

\#\#改造图片分享链接 为路由链接并显示组件的页面

1.在Homecontainer.vue中修改图文项的a链接为router-link to="/home/photolist"

2.创建一个PhotoList.vue组件

3.在router.js中引入PhotoList.vue组件，并设置路由

\#\#绘制图片列表组件的列表结构并写样式

1.顶部的滑动条制作

2.制作底部的图片列表

\#\#制作顶部互动条的坑们;

1.需要借助于MUI中的 tab-top-webview-main.html

2.需要把 slider区域的mui-fullscreen类去掉

\#\#滑动条无法正常的触发滑动。通过检查官方文档，发现这是js组件，需要被初始化一下：

\+1.导入mui,js

\+2.调用官方提供的方式是初始化

mui('.mui-scroll-wrapper').scroll(\{

deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006

\});

4.我们在初始化滑动条的时候，导入mui.js ，但是控制台报错：

mui.js:3493 Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them

at Function.Class.extend (mui.js:3493)

at eval (mui.js:3710)

at eval (mui.js:4636)

at Object.gRey (bundle.js:3880)

at webpack\_require (bundle.js:727)

at fn (bundle.js:101)

at eval (PhotoList.vue?./node\_modules/babel-loader/lib!./node\_modules/vue-loader/lib??vue-loader-options:7)

at Object.xGM2 (bundle.js:4862)

at webpack\_require (bundle.js:727)

at fn (bundle.js:101)

\+经过我们合理的推测，可能是mui.js中用到了‘caller’ ,'callee',and

'arguments'东西，但是webpack打包好的 bundle.js中默认启用严格模式，

所以这两者冲突了。

解决方案：

1.把mui.js中的非严格模式的代码改掉，但是不现实

2.把webpack打包时候的严格模式禁用掉。

使用第二种方式：

\+1.cnpm install babel-plugin-transform-remove-strict-mode -D

\+2.1. 如果使用的是 .babelrc (Recommended)

.babelrc 文件添加配置

"plugins": \["transform-remove-strict-mode"\]

3.刚进入 图片分享页面的时候，滑动条无法正常工作，经过我们分析，如果要初始化滑动条，

必须等dom元素加载完毕，所以我们把初始化滑动条的代码，搬到了mounted生命周期函数中

\#\#解决Tabber的切换问题

修改css文件中所有的mui-tab-item为mui-tab-item-hou,

注意：看自己引入的是什么css文件

获取所有的分类，并渲染分类列表：

\#\#制作图片列表区域

1.图片列表使用懒加载技术，我们可以使用Mint-UI 提供的现成的组件，'lazy-load'

2.根据lazy-load的使用文档，尝试使用

3.渲染图片列表数据

\#\#实现了图片列表的懒加载改造 和样式美化

\#\#实现了 点击图片跳转到 图片详情页面

1.改造li为router-link的时候注意，用tag指定渲染为"li"标签。

2.创建photoinfo.vue,实现路由链接等

\#\#实现 详情页面的布局和美化，同时获取数据和渲染页面

\#\#实现图片详情的缩略图

1.使用插件vue-preview这个缩略图插件

2.获取到所有的图片列表，然后使用渲染数据

3.注意：每个图片必须要有width,height属性

\#\#绘制 商品列表 页面基本结构并美化

\#\#尝试在手机上进行项目的预览和测试

\#\#分析：为什么 商品评论中的轮播图那么丑

1.首页的图片，它的宽和高，都是使用了100%的宽度

2.商品详情的页面中，轮播图的图片，如果也使用宽高100%，页面不好看

3.商品详情希望是自适应宽高

4.而首页希望是100%宽高

vue 打卡图片_Vue

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 vue 图片引入

相关 vue 打卡图片_Vue

相关 vue 选项卡切换

相关 vue打包的优化

相关 vue打卡日历_vue实现日历备忘录功能

相关一键打卡html,打卡操作.html

相关【vue】less配置图片

相关打卡，只是打卡，又是打卡，还是打卡，发卡卡

相关 Vue拨打电话功能

相关 vue.js--Tab选项卡