geek-james / ddbuy Goto Github PK
View Code? Open in Web Editor NEW🎉Vue全家桶+Vant 搭建大型单页面电商项目.http://ddbuy.7-orange.cn
License: MIT License
🎉Vue全家桶+Vant 搭建大型单页面电商项目.http://ddbuy.7-orange.cn
License: MIT License
// 数据初始化
_initData () {
getHomeData().then(response => {
if (response.success) {
// 给轮播组件 sowing_list赋值
this.sowing_list = response.data.list[0].icon_list;
this.nav_list = response.data.list[2].icon_list;
this.flash_sale_product_list = response.data.list[3].product_list;
this.tabbar_all_product_list = response.data.list[12].product_list;
this.isShowLoading = false
// 给特色专区赋值
this.specialZone = response.data.special_zone;
// 获取首页广告图
this.home_ad = response.data.home_ad.image_url;
}
}).catch(error => {
console.log(error);
});
1 内容可以做一下缓存 不用我每次点击一个tab-bar后回来又是重新刷新 又要滑到原来的位置 体验不好吧
2 迟点什么那里 不知道能否做到下滑的时候可以根据数据区分去控制上面导航栏
3 分类里面 点击图标报错 应该是详情页跳转还没有做吧
3 后续希望通过慢慢完善成一个完美的项目 哈哈 小萌新可以好好向大佬学历
mock接口好像有跨域问题,作者会修复么
login页面,报错。。。
在线项目和本地项目在运行时都会报这个错,前端小白,求指教,感谢~
// 第38行, this.throttler 返回的是一个新的函数A
window.addEventListener('scroll', this.throttler(this.getScrollTop, 300))
// 第75 行, 销毁的是定义好的 getScrollTop 函数, 而不是函数A
window.removeEventListener('scroll', this.getScrollTop)
要是新增商品详情 就好了 这样可以做个通用的商城
1.关于移动端,布局,机测试,
譬如iPhone XS MAX,(刘海屏幕)
或者华为mate 30(曲面屏幕)
以及vivo,
oppo,
小米,
众多各种size的安卓手机
狗屁不通观光团
export default {
props: {
// 接受父组件传过来的数据
sowing_list: Array,
// 对象或数组且一定会从一个工厂函数返回默认值
default: () => {
return []
}
},
iphone , ipad 特有的 safrai 浏览器内核
关于样式的差异性测试
在首页点击了回到顶部这个组件以后,商品Tabbar吸顶效果消失。(再有纯属我自己个人体验来说:就是离开首页home这个组件以后得记录下状态和位置,然后重新回到首页的时候可以定位上一次离开的那个位置)
iphoneXR/11(带底部黑条的手机)下滑时浏览器底部工具栏隐藏,购物车页面的底部tabbar会被submitbar遮挡。
我的解决方法:给 submitbar 也添加 safe-area-inset-bottom
属性,同时设置
/deep/.van-submit-bar {
bottom: 1.333rem;
background-color: transparent;
.van-submit-bar__bar {
background-color: #fff;
}
}
例如
“限时抢购“
“输入商品名称”
这样的文案,不应该出现在代码里面,
应该抽取出来,
整理成单独的文件,
也方便做国际化
大佬,有视频教程或者开发的md文档吗?想跟着做一遍~
电商项目,
一般都是多页面应用,
作者选择单页面 sigle page application,
对于优化首页面加载时间,
做了哪些优化呢?
英文文案,
或者接口内容,
建议使用 “腾讯人工智能翻译”
对于电商优化这块,作者可以去看看模块化加载(任务切片),可以利用ES6 的 generator 来实现任务切片,希望对你有所帮助
http://ddbuy.7-orange.cn/#/dashboard/category
1、�滑动时分类没有对应,这点饿了吗app做的挺好
2、使用better-scroll来做滑动感觉会是个坑
warning in ./src/views/mine/Children/MyVip.vue?vue&type=style&index=0&id=d467415a&lang=less&scoped=true&
Module Warning (from ./node_modules/postcss-loader/src/index.js):
Warning
(89:3) start value has mixed support, consider using flex-start instead
@ ./node_modules/vue-style-loader??ref--10-oneOf-1-0!./node_modules/css-loader??ref--10-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--10-oneOf-1-2!./node_modules/less-loader/dist/cjs.js??ref--10-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/mine/Children/MyVip.vue?vue&type=style&index=0&id=d467415a&lang=less&scoped=true& 4:14-496 14:3-18:5 15:22-504
@ ./src/views/mine/Children/MyVip.vue?vue&type=style&index=0&id=d467415a&lang=less&scoped=true&
@ ./src/views/mine/Children/MyVip.vue
@ ./src/router/router.js
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://192.168.1.119:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
选择地址后。比如 上海某地 然后去个人中文 我的收获地址 。再返回首页,之前选择的地址刷新了。
应该是选择一次后保存不会变更了。
在这个http://ddbuy.7-orange.cn/#/order/myAddress地址里 增加很多个地址以后 滑动是失效的 无法滑动操作
是否有后台配置系统开源计划
“吃什么”上方的菜单要是支持左右滑动会更好
首先感谢作者大佬开源这个项目,这段时间刚好在学习vue+vant,从这个项目学到不少,再次感谢大佬,
我在看源码的时候发现作者在首页的轮播组件并不是使用的vant自带的swipe组件,而是单独引入了vue-awesome-swiper这个轮播组件,不知道到作者是出于哪方面考虑的;还有个问题就是产品列表也没有使用list组件来实现上拉加载更多这种需求,请问这是基于什么考虑的呢;
新手求教,请大佬不要笑话我哈😄
首页跳到分类页tabbar 没有跟随跳转需要加一个路由监听,你写在created 里的 switch 可以不用去写,进入首页created 只会执行一次。
添加监听代码如下:
watch: {
$route: {
handler(val, oldVal) {
switch (val.name) {
case "home":
this.active = 0;
break;
case "category":
this.active = 1;
break;
case "eat":
this.active = 2;
break;
case "cart":
this.active = 3;
break;
case "mine":
this.active = 4;
break;
default:
break;
}
},
deep: true
}
v1.2.2以下版本服务器接口数据丢失,请下载最新版本v1.2.2及以上版本进行本地测试.
The following version of v1.2.2 server interface data is lost, please download the latest version of v1.2.2 and above for local testing.
在首页里物品添加到购物车,点击购物车后滚动条没有回滚到顶部。不能及时的看到添加后的商品
src/views/order/Order.vue:123
{{$t('order.use')}}{{integral}}{{$t('order.aliPay')}}{{integralToprice | moneyFormat}}
应该为
{{$t('order.use')}}{{integral}}{{$t('order.order12')}}{{integralToprice | moneyFormat}}
使用800支付宝支付 -> 使用800积分兑换
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.