十、项目开发

一、目录划分

src目录下文件划分：

• assets：资源文件

  • css

  • img

• components：组件

  • common：公共组件（其它项目也可用）

  • content：本项目和业务相关的公共组件

• common：公共js文件

  • const.js：公共的常量

  • utils.js：公共的方法

  • mixin.js：公共的混入

• network：网络请求

• router：路由

• store：状态管理

• views：视图文件

二、封装思想

组件内网络请求封装思想，钩子函数不做逻辑处理

home.js

import { request } from './request'

export function getHomeMultidata () {
  return request({
    url: '/home/mulitdata'
  })
}

export function getHomeGoods (type, page) {
  return request({
    url: '/home/mulitdata',
    params: {
      type,
      page
    }
  })
}

Home.vue

// 导入网络请求文件
import { getHomeMultidata, getHomeGoods } from '@/network/home'

export default {
  name: 'Home',
  components: {
    NavBar,
    TabControl
  },
  data () {
    return {
      banners: [],
      goods: {
        pop: { page: 0, list: [] },
        new: { page: 0, list: [] },
        sell: { page: 0, list: [] },
      }
    }
  },
  created () {
    // 创建完组件发送网络请求，钩子函数不要写过多处理逻辑
    this.getHomeMultidata()
    // 请求商品数据
    this.getHomeGoods('pop')
    this.getHomeGoods('new')
    this.getHomeGoods('sell')
  },
  methods: {
    getHomeMultidata () {
      getHomeMultidata().then(res => {
        this.banners = res.data.banner.list
      })
    },
    getHomeGoods ( type ) {
      const page = this.goods[type].page + 1
      getHomeGoods( type, page ).then(res => {
        this.goods[type].list.push(...res.data.list)
        this.goods[type].page += 1
      })
    }
  }
}

三、插件使用

官网：better-scroll

• 安装

npm install better-scroll --save

• 封装

import BScroll from 'better-scroll'
export default {
    data() {
        return {
            scroll: null
        }
    },
    mounted() {
        this.scroll = new BScroll(document.querySelector('.wrapper'), {
            // probeType表示是否侦测滚动
            // 值为0，默认值，不侦测
            // 值为1，也是不侦测
            // 值为2，表示侦测，滚动的过程中侦测，手指离开后的惯性运动不侦测
            // 值为3，表示侦测，只要是滚动，就侦测
            probeType: 3,
            // x轴滚动
            scrollX: false,
            // BetterScroll 默认会阻止浏览器的原生 click 事件
            click: true,
            // 扩展上拉加载
            pullUpLoad: true
        })
        this.scroll.on('scroll', (position) => {
            console.log(position)
        })
        this.scroll.on('pullingUp', () => {
            console.log('上拉加载更多')
            // 发送网络请求请求下一页数据
        })
    }
}

• 使用

<template>
  <div id="home">
    <nav-bar class="home-nav"><div slot="center">购物街</div></nav-bar>
    <scroll class="scroll-con">
      <!-- BScroll对象中click为true，否则点击事件无效 -->
      <tab-control
        :titles="['流行', '新款', '精选']"
        class="tab-control"
        @tabClick="tabClick"
      />
      <!-- 需要滚动的内容 -->
    </scroll>
  </div>
</template>

<script>
    import Scroll from '@/components/common/scroll/Scroll'
    export default {
  name: 'Home',
  components: {
    NavBar,
    TabControl,
    Scroll
  },
  methods: {
    /**
     * 事件相关方法
     */
    tabClick (index) {
      switch (index) {
        case 0:
          console.log('pop')
          break
        case 1:
          console.log('new')
          break
        case 2:
          console.log('sell')
          break
      }
    }
    /**
     * 网络请求相关方法
     */
    // getHomeMultidata () {
    //   getHomeMultidata().then(res => {
    //     this.banners = res.data.banner.list
    //   })
    // },
    // getHomeGoods (type) {
    //   const page = this.goods[type].page + 1
    //   getHomeGoods(type, page).then(res => {
    //     this.goods[type].list.push(...res.data.list)
    //     this.goods[type].page += 1
    //   })
    // }
  }
}
</script>

<style lang="scss" scoped>
#home {
  height: 100vh;
  padding-top: 44px;
  position: relative;
  .home-nav {
    background: #f89;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
  }
  .scroll-con{
    background: pink;
    overflow: hidden;
    // 滚动区域选择定位（推荐）或calc
    // height: calc(100vh - 93px);
    position: absolute;
    left: 0;
    right: 0;
    top: 44px;
    bottom: 49px;
  }
}
.tab-control {
  position: sticky;
  top: 44px;
  background: #fff;
}
</style>