十、项目开发
作者：互联网
一、目录划分
src目录下文件划分：
-
assets：资源文件
-
css
-
img
-
-
components：组件
-
common：公共组件（其它项目也可用）
-
content：本项目和业务相关的公共组件
-
-
common：公共js文件
-
const.js：公共的常量
-
utils.js：公共的方法
-
mixin.js：公共的混入
-
-
network：网络请求
-
router：路由
-
store：状态管理
-
views：视图文件
二、封装思想
组件内网络请求封装思想，钩子函数不做逻辑处理
home.js
1 import { request } from './request'
2
3 export function getHomeMultidata () {
4 return request({
5 url: '/home/mulitdata'
6 })
7 }
8
9 export function getHomeGoods (type, page) {
10 return request({
11 url: '/home/mulitdata',
12 params: {
13 type,
14 page
15 }
16 })
17 }
Home.vue
1 // 导入网络请求文件
2 import { getHomeMultidata, getHomeGoods } from '@/network/home'
3
4 export default {
5 name: 'Home',
6 components: {
7 NavBar,
8 TabControl
9 },
10 data () {
11 return {
12 banners: [],
13 goods: {
14 pop: { page: 0, list: [] },
15 new: { page: 0, list: [] },
16 sell: { page: 0, list: [] },
17 }
18 }
19 },
20 created () {
21 // 创建完组件发送网络请求，钩子函数不要写过多处理逻辑
22 this.getHomeMultidata()
23 // 请求商品数据
24 this.getHomeGoods('pop')
25 this.getHomeGoods('new')
26 this.getHomeGoods('sell')
27 },
28 methods: {
29 getHomeMultidata () {
30 getHomeMultidata().then(res => {
31 this.banners = res.data.banner.list
32 })
33 },
34 getHomeGoods ( type ) {
35 const page = this.goods[type].page + 1
36 getHomeGoods( type, page ).then(res => {
37 this.goods[type].list.push(...res.data.list)
38 this.goods[type].page += 1
39 })
40 }
41 }
42 }
三、插件使用
-
安装
npm install better-scroll --save
- 封装
1 import BScroll from 'better-scroll'
2 export default {
3 data() {
4 return {
5 scroll: null
6 }
7 },
8 mounted() {
9 this.scroll = new BScroll(document.querySelector('.wrapper'), {
10 // probeType表示是否侦测滚动
11 // 值为0，默认值，不侦测
12 // 值为1，也是不侦测
13 // 值为2，表示侦测，滚动的过程中侦测，手指离开后的惯性运动不侦测
14 // 值为3，表示侦测，只要是滚动，就侦测
15 probeType: 3,
16 // x轴滚动
17 scrollX: false,
18 // BetterScroll 默认会阻止浏览器的原生 click 事件
19 click: true,
20 // 扩展上拉加载
21 pullUpLoad: true
22 })
23 this.scroll.on('scroll', (position) => {
24 console.log(position)
25 })
26 this.scroll.on('pullingUp', () => {
27 console.log('上拉加载更多')
28 // 发送网络请求请求下一页数据
29 })
30 }
31 }
- 使用
1 <template>
2 <div id="home">
3 <nav-bar class="home-nav"><div slot="center">购物街</div></nav-bar>
4 <scroll class="scroll-con">
5 <!-- BScroll对象中click为true，否则点击事件无效 -->
6 <tab-control
7 :titles="['流行', '新款', '精选']"
8 class="tab-control"
9 @tabClick="tabClick"
10 />
11 <!-- 需要滚动的内容 -->
12 </scroll>
13 </div>
14 </template>
15
16 <script>
17 import Scroll from '@/components/common/scroll/Scroll'
18 export default {
19 name: 'Home',
20 components: {
21 NavBar,
22 TabControl,
23 Scroll
24 },
25 methods: {
26 /**
27 * 事件相关方法
28 */
29 tabClick (index) {
30 switch (index) {
31 case 0:
32 console.log('pop')
33 break
34 case 1:
35 console.log('new')
36 break
37 case 2:
38 console.log('sell')
39 break
40 }
41 }
42 /**
43 * 网络请求相关方法
44 */
45 // getHomeMultidata () {
46 // getHomeMultidata().then(res => {
47 // this.banners = res.data.banner.list
48 // })
49 // },
50 // getHomeGoods (type) {
51 // const page = this.goods[type].page + 1
52 // getHomeGoods(type, page).then(res => {
53 // this.goods[type].list.push(...res.data.list)
54 // this.goods[type].page += 1
55 // })
56 // }
57 }
58 }
59 </script>
60
61 <style lang="scss" scoped>
62 #home {
63 height: 100vh;
64 padding-top: 44px;
65 position: relative;
66 .home-nav {
67 background: #f89;
68 position: fixed;
69 left: 0;
70 right: 0;
71 top: 0;
72 }
73 .scroll-con{
74 background: pink;
75 overflow: hidden;
76 // 滚动区域选择定位（推荐）或calc
77 // height: calc(100vh - 93px);
78 position: absolute;
79 left: 0;
80 right: 0;
81 top: 44px;
82 bottom: 49px;
83 }
84 }
85 .tab-control {
86 position: sticky;
87 top: 44px;
88 background: #fff;
89 }
90 </style>
标签：getHomeGoods,项目,res,list,page,开发,type,scroll 来源： https://www.cnblogs.com/tricker65535/p/16503820.html