做食品网站需要什么,西安异构国际设计,网站名称与主办单位,上海外贸公司黄页最近快毕业了呜呜呜#xff0c;准备找工作#xff0c;但是缺乏项目经验#xff0c;于是就在B站找相关的课程#xff0c;学完之后便根据老师稳定的教导#xff0c;以及自己稳定的心态#xff0c;做了一个类似于蘑菇街的电商APP。(后端数据接口由老师提供#xff0c;老师叫…最近快毕业了呜呜呜准备找工作但是缺乏项目经验于是就在B站找相关的课程学完之后便根据老师稳定的教导以及自己稳定的心态做了一个类似于蘑菇街的电商APP。(后端数据接口由老师提供老师叫coderwhy前端讲得真的很不错)。蘑菇街作为中国最大女性购物社区其APP的设计水平也毋庸置疑的(1)准备工作在阅读大神的博客时有人问里面使用的美工素材怎么得到的其实很简单下载一个APP把APK格式修改成rar后解压你会在目录下看到所有的素材。(2)开始工作 项目目录由于是自己的练手之作所以莫得启动页面下面是首页详情页分类页个人页面一. FeatureView独立组件封装FeatureViewdivaimg二. TabControl独立组件的封装props - titlesdiv根据titles v-for遍历 div - span{{title}}css相关选中哪一个tab, 哪一个tab的文字颜色变色, 下面border-bottomcurrentIndex:key(item,index) classtab-control-item:class{active: indexcurrentIndex}clickitemClick(index){{item}}export default {name: TabControl,props:{titles:{type:Array,default(){return [];}}},data() {return {currentIndex:0,}},methods:{itemClick(index){this.currentIndex index;this.$emit(tabClick, index);}}}.tab-control{display: flex;text-align: center;font-size: 15px;height: 40px;line-height: 40px;background-color: #fff;}.tab-control-item{flex: 1;}.tab-control-item span{padding: 5px;}.active{color: #ff5777;}.active span{border-bottom: 3px solid var(--color-tint);}三. 首页商品数据的请求3.1. 设计数据结构, 用于保存数据goods: {pop: page/listnew: page/listsell: page/list}3.2. 发送数据请求在home.js中封装getHomeGoods(type, page)在Home.vue中, 又在methods中getHomeGoods(type)调用getHomeGoods(pop)/getHomeGoods(new)/getHomeGoods(sell)page: 动态的获取对应的page获取到数据: resthis.goods[type].list.push(...res.data.list)this.goods[type].page 1goods: {pop: page1:/list[30]new: page1/list[30]sell: page1/list[30]}四. 对商品数据进行展示4.1. 封装GoodsList.vue组件props: goods - list[30]v-for goods - GoodsListItem[30]GoodListItem(组件) - GoodsItem(数据)4.2. 封装GoodsListItem.vue组件props: goodsItemgoodsItem 取出数据, 并且使用正确的div/span/img基本标签进行展示五. 对滚动进行重构: Better-Scroll5.1. 在index.html中使用Better-Scrollconst bscroll new BScroll(el, { })注意: wrapper - content - 很多内容1.监听滚动probeType: 0/1/2(手指滚动)/3(只要是滚动)bscroll .on(scroll, (position) {})2.上拉加载pullUpLoad: truebscroll .on(pullingUp, () {})3.click: falsebutton可以监听点击div不可以5.2. 在Vue项目中使用Better-Scroll在Profile.vue中简单的演示对Better-Scroll进行封装: Scroll.vueHome.vue和Scroll.vue之间进行通信Home.vue将probeType设置为3Scroll.vue需要通过$emit, 实时将事件发送到Home.vue六. 回到顶部BackTop6.1. 对BackTop.vue组件的封装6.2. 如何监听组件的点击直接监听back-top的点击, 但是可以直接监听?不可以, 必须添加修饰.native回到顶部scroll对象, scroll.scrollTo(x, y, time)this.$refs.scroll.scrollTo(0, 0, 500)6.3. BackTop组件的显示和隐藏isShowBackTop: false监听滚动, 拿到滚动的位置:-position.y 1000 - isShowBackTop: trueisShowBackTop -position.y 1000七. 解决首页中可滚动区域的问题Better-Scroll在决定有多少区域可以滚动时, 是根据scrollerHeight属性决定scrollerHeight属性是根据放Better-Scroll的content中的子组件的高度但是我们的首页中, 刚开始在计算scrollerHeight属性时, 是没有将图片计算在内的所以, 计算出来的告诉是错误的(1300)后来图片加载进来之后有了新的高度, 但是scrollerHeight属性并没有进行更新.所以滚动出现了问题如何解决这个问题了?监听每一张图片是否加载完成, 只要有一张图片加载完成了, 执行一次refresh()如何监听图片加载完成了?原生的js监听图片: img.onload function() {}Vue中监听: load方法调用scroll的refresh()如何将GoodsListItem.vue中的事件传入到Home.vue中因为涉及到非父子组件的通信, 所以这里我们选择了事件总线bus -总线Vue.prototype.$bus new Vue()this.bus.emit(事件名称, 参数)this.bus.on(事件名称, 回调函数(参数))问题一: refresh找不到的问题第一: 在Scroll.vue中, 调用this.scroll的方法之前, 判断this.scroll对象是否有值第二: 在mounted生命周期函数中使用 this.$refs.scroll而不是created中问题二: 对于refresh非常频繁的问题, 进行防抖操作防抖debounce/节流throttle(课下研究一下)防抖函数起作用的过程:如果我们直接执行refresh, 那么refresh函数会被执行30次.可以将refresh函数传入到debounce函数中, 生成一个新的函数.之后在调用非常频繁的时候, 就使用新生成的函数.而新生成的函数, 并不会非常频繁的调用, 如果下一次执行来的非常快, 那么会将上一次取消掉debounce(func, delay) {let timer nullreturn function (...args) {if (timer) clearTimeout(timer)timer setTimeout(() {func.apply(this, args)}, delay)}},八. 上拉加载更多的功能loadMore(){this.getHomeGoods(this.currentType);this.$refs.scroll.refresh();}九. tabControl的吸顶效果9.1. 获取到tabControl的offsetTop必须知道滚动到多少时, 开始有吸顶效果, 这个时候就需要获取tabControl的offsetTop但是, 如果直接在mounted中获取tabControl的offsetTop, 那么值是不正确.如何获取正确的值了?监听HomeSwiper中img的加载完成.加载完成后, 发出事件, 在Home.vue中, 获取正确的值.补充:为了不让HomeSwiper多次发出事件,可以使用isLoad的变量进行状态的记录.注意: 这里不进行多次调用和debounce的区别9.2. 监听滚动, 动态的改变tabControl的样式问题:动态的改变tabControl的样式时, 会出现两个问题:问题一: 下面的商品内容, 会突然上移问题二: tabControl虽然设置了fixed, 但是也随着Better-Scroll一起滚出去了.其他方案来解决停留问题.在最上面, 多复制了一份PlaceHolderTabControl组件对象, 利用它来实现停留效果.当用户滚动到一定位置时, PlaceHolderTabControl显示出来.当用户滚动没有达到一定位置时, PlaceHolderTabControl隐藏起来.十. 让Home保持原来的状态10.1. 让Home不要随意销毁掉keep-alive10.2. 让Home中的内容保持原来的位置离开时, 保存一个位置信息saveY.进来时, 将位置设置为原来保存的位置saveY信息即可.注意: 最好回来时, 进行一次refresh()非父子组件通信:我们在用Vue进行前端开发的时候往往会遇到有很多个组件内他们都有类似的data类似的方法。这些大量重复的代码如果正常编写出来代码既不美观也不优雅而且看起来也相当复杂。所以vue官方提供了一个极其好用的方式来解决这个问题那就是mixin先来看看官方的介绍混入 (mixin) 提供了一种非常灵活的方式来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时所有混入对象的选项将被“混合”进入该组件本身的选项。在Java开发中 如果我们遇到两个类有大量相似代码的时候我们通常会定义一个父类来讲这些重复代码写在一起然后再让这两个类来继承父类的代码和方法。class Animal{run(){}}class Person extends Animal{//run(){}}class Dog extends Animal{//run(){}}而在Vue中每个组件export出来的是对象所以不能像类那样继承于是Vue提供了类似于类的继承的方法 mixin使用方法在这里贴上自己项目的部分代码。定义一个mixin.js 文件import {debounce} from ./utils;export const itemListenerMixin {data(){return {itemImgListener: null,}},methods:{},mounted(){let newRefresh debounce(this.$refs.scroll.refresh, 100)this.itemImgListener () {newRefresh()}this.$bus.$on(itemImgLoad, this.itemImgListener)console.log(我是混入的东西)}}mixin 里就跟一个正常的Vue的组件没有任何的区别可以定义datamethods生命周期函数等等。跟Java里面的父类和子类完全一样。只是调用的方法不一样而已。两个调用mixin.js的组件Detail.vueimport {itemListenerMixin} from common/mixin;mixins: [itemListenerMixin],//其余代码均省略Home.vueimport {itemListenerMixin} from common/mixin;mixins: [itemListenerMixin],//其余代码均省略只需要这样一小段代码就可以调用到mixin.js 内定义的组件了。而且在两个组件内作用完全一样当我们在组件上应用Mixin的时候有可能组件与Mixin中都定义了相同的生命周期钩子这时候钩子的执行顺序的问题凸显了出来。默认Mixin上会首先被注册组件上的接着注册这样我们就可以在组件中按需要重写Mixin中的语句。组件拥有最终发言权。当发生冲突并且这个组件就不得不“决定”哪个胜出的时候这一点就显得特别重要否则所有的东西都被放在一个数组当中执行Mixin将要被先推入数组其次才是组件。const myMixin {mounted() {console.log(mixin!)}}new Vue({el: #app,mixins: [myMixin],mounted() {console.log(Vue instance!)}});//Output in console mixin! Vue instance!//mixinconst myMixin {methods: {sayHello: function() {console.log(mixin!)}},mounted() {this.sayHello()}}//vue instance or componentnew Vue({el: #app,mixins: [myMixin],methods: {sayHello: function() {console.log(Vue instance!)}},mounted() {this.sayHello()}})// Output in console Vue instance! Vue instance!我们可以看到当他们之间没有发生同名冲突的时候两个都正常打印了。而当他们发生冲突之后。你可以看到这里打印了两个Vue instance。这是因为第一个函数被调用之后并没有被销毁而是被重写了。然后被调用了两次当组件和混入对象含有同名选项时这些选项将以恰当的方式混合。选项合并数据对象(data)在内部会进行递归合并在和组件的数据发生冲突时以组件数据优先。同名钩子函数(created,mounted...)将混合为一个数组因此都将被调用。另外混入对象的钩子将在组件自身钩子之前调用。值为对象的选项(methods, components 和 directives)将被混合为同一个对象。两个对象键名冲突时取组件对象的键值对。需要注意的是谨慎使用全局混入对象因为会影响到每个单独创建的 Vue 实例 (包括第三方模板)。大多数情况下只应当应用于自定义选项。也可以将其用作 Plugins 以避免产生重复应用所以Vue对mixin 设定了 自定义选项合并策略自定义选项将使用默认策略即简单地覆盖已有值。如果想让自定义选项以自定义逻辑合并可以向 Vue.config.optionMergeStrategies 添加一个函数Vue.config.optionMergeStrategies.myOption function (toVal, fromVal) {// 返回合并后的值}对于多数值为对象的选项可以使用与 methods 相同的合并策略var strategies Vue.config.optionMergeStrategiesstrategies.myOption strategies.methods
