android 仿蘑菇街效果,Vue项目-仿蘑菇街移动端Web开发

一、项目目录

二、项目运行截图

1.首页

2.详情页

三、具体实现

(一)tabbar的封装

1.将商城底部tabbar抽离成TabBar与TabBarItem两个独立的组件。

2.通过插槽将TabBarItem组件插入到TabBar中。

3.为TabBarItem中的根标签div绑定Click事件，通过计算属性判断当前界面路径是否与路由一致，从而决定tabbar的颜色显示：对应当前页面的TabBarItem显示深粉色，非当前页面的显示深灰色。

(二)首页数据的请求

1.通过axios向服务器请求数据

2.Home页请求数据

3.在轮播图中展示请求到的图片

4.TabControl组件的封装

原理与TabBar组件的封装相似。其中需要注意的是父子组件之间的通信。

子组件向父组件传递信息需要通过$emit()传送事件与参数。

5.商品数据的请求与展示

(1)抽离出GoodsList与GoodsListItem组件，分别用于商品列表、具体商品的展示。

(2)在home.js中封装getHomeGoods函数

(3)在Home.Vue中调用getHomeGoods函数，来动态获取对应的商品列表数据。

(4)将获取到的商品展示在首页。

三、页面滚动的优化

由于原生的滚动在移动端经常卡顿，所以引入Better Scroll插件进行优化。

1.创建Scoll.vue组件，导入BScroll。

2.在Home.vue中导入Scroll.vue组件，并通过设置ref值，使Home.vue父组件可以通过this.$refs.获取子组件。

3.将scoll组件的pull-up-load属性设置为"true"，监听上拉事件，并绑定loadMore函数，以完成“上拉加载更多”功能。

四、解决可滚动区域的问题

Better Scroll中的属性scrollHeight是根据在Better Scroll中子组件的高度来计算的。

但在首页中，如果网络较慢，商品图片没有立刻加载出来时，图片的高度不会计入scrollHight中。

而在图片加载完成后，scrollHeight不会更新。从而导致可滚动区域有时不能正常滚动的问题。

解决方法：

Vue中监听: @load=‘方法’

在GoodsListItem组件中使用imageLoad函数来监听图片是否加载完成，如果加载完成，则执行一次Better Scroll的refresh函数。

其中，GoodsListItem与Home非父子组件之间的传值，通过事件总线来实现。

但同时带来另一个问题，refresh函数执行太过频繁，会加重浏览器负担。

解决方法：防抖。将refresh放入防抖函数中，并设置延迟时间，从而解决refresh函数执行过于频繁的问题。

五、BackTop组件的封装

BackTop：回到顶部。

1.在Home.vue中监听BackTop的点击事件，使用Better Scroll中的scrollTo函数使页面滚动到顶部。

2.只有在页面下拉到一定程度时才显示“回到顶部”。

android 仿蘑菇街效果,Vue项目-仿蘑菇街移动端Web开发相关推荐

六十五、完成Vue项目去哪儿网App首页开发（来源：慕课网）
2020/10/21. 周三.今天又是奋斗的一天. @Author:Runsen @Date:2020/10/21 写在前面:我是「Runsen」,热爱技术.热爱开源.热爱编程.技术是开源的.知识是共 ...
html中购物车小球飞入的效果,vue项目中css3实现加入购物车小球抛物线飞入动画效果...
学习Vue中在做移动端商城练习项目时,记录css3实现加入购物车抛物线小球飞入动画效果.下面会介绍我在项目中实现抛物运动的简单方法. 知识点:css3动画(抛物线运动).vue动态绑定事件(控制小球出 ...
html引vue怎么实现国际化,Vue项目中Vue-i18n和element-ui国际化开发实现过程_唇印_前端开发者...
在开发,但是在前面博客中,如果项目中使用了element-ui插件,插件中的语言文字替换可以结合element-ui插件一同进行.element-ui插件自身也提供了语言包.具体的配置和使用方法参考如 ...
vue项目配置生产、测试和开发环境
目前的 web 项目开发基本都是基于前后端分离的模式. 在实际的开发过程中,从开发到测试完成.发布到线上所调用到的接口地址可能都不一样,那就需要在项目中分别配置各个环境的接口地址(或者域名,也可以定义 ...
vue项目PC兼容移动端
做完的pc项目要求兼容移动端,常规操作的话是新做一个webapp后再来回跳转, 当前pc项目没有太多的交互和复杂的页面,所以决定在一个项目里进行兼容适配 1.新建两个组件,pc端页面组件,m端页面组件 ...
Vue项目实战-vue2(移动端)
Vue项目实战(移动端)# 相关资料 (一) 创建项目 (二) 禁用Eslint (三) devtool (四) 添加less支持 (五) vue路由配置(背诵) (六) 父子组件通信(背诵) (七) ...
Android UI视图效果篇之仿QQ好友列表分组悬浮PinnedHeaderExpandableListView
楼主是在平板上测试的,图片稍微有点大,大家看看效果就好接下来贴源码: PinnedHeaderExpandableListView.java 要注意的是在 onGroupClick方法中paren ...
关于Android 工程师转成vue的三两事儿(2)--前端开发技巧
前面的文章也提到了,我本身就是做android的,外加上刚开始做android的时候.学长对我的代码风格有很大的限制.所以我在学习最新的语言的时候,首先会想到的是代码的格式化.虽然说vue-cl ...
vue项目配置rem移动端适配
一.项目介绍脚手架CLI:@vue/cli Vue版本:2.6.11 移动UI组件库:Vant#2.10.14 CSS预处理器:sass 二.配置lib-flexible插件下载插件 npm i ...

android 仿蘑菇街效果,Vue项目-仿蘑菇街移动端Web开发

android 仿蘑菇街效果,Vue项目-仿蘑菇街移动端Web开发相关推荐

最新文章

热门文章