Vue2 + Vant + better-scroll 开发 supermall商城（一，首页开发）

最新推荐文章于 2026-05-16 15:37:57 发布

原创最新推荐文章于 2026-05-16 15:37:57 发布 · 2.3k 阅读

25 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue

本文介绍了使用Vue2、Vant UI库和better-scroll开发supermall商城首页的过程，涵盖框架搭建、Navbar、Tabbar、Swiper组件的实现，以及在开发中遇到的细节问题和解决方案，如轮播图、TabContentBar和商品列表的制作。

前言：数据请求使用axios，tabbar，swiper使用Vant，商品列表使用better-scroll，其余手撕。

1.框架搭建

开发一个程序之前一定要先有构思，框架决定了构思的局限，构思决定了程序的结果。

目录结构：

node_modules目录：简单的理解为依赖库

public目录：存放入口文件(index.html)

src目录：资源文件夹

assets目录：存放css，img文件

common目录：公共js文件(公共常量，公共工具类，公共方法)

components目录：存放公共组件

components下common目录：公共组件，别的项目也可以用

components系下的content目录：存放当前项目的组件(多个路由页面都要使用)

network目录：网络数据请求

router目录：众所周知的vue-router路由文件

store目录：一样众所周知的vue-x文件

views目录：里边存放每一个页面所需要的组件，每一个页面在里边都是一个目录，分别是

cart（购物车），category（分类），home（主页），profile（我的）

APP.vue文件：所有组件都要从这里开始布局，路由也在这里嵌套

main.js文件：APP.vue的js文件

babel.config.js：配置Vant的地方

package.json：配置vue，vue-cli，node，以及一些命令的地方

vue.config.js：配置别名，用于缩减文件路径

2.Navbar

这个没什么技术难点，左中右是三个插槽slot，用于插入不同的东西，以便在详情页和其他页面使用。

<template>
	<div class="navbar">
		<div class="left"><slot name="left"></slot></div>
		<div class="center"><slot name="center"></slot></div>
		<div class="right"><slot name="right"></slot></div>
	</div>
</template>

3.Tabbar

tabar是也是由插槽组成，使用弹性布局让每一个插槽的位置平均分布，在插槽上放入图片和文字即可，监听点击事件改变状态和切换路由。在你熟练知道一些组件的写法后，我建议使用Vant提供的tabbar，动画效果和切换比较赏心悦目，而不是自己的生硬，费很多时间调样式。

4.Swiper

轮播图，我以前用js敲出来的时候感慨万千，后来在bootstrap上看到这个后哭着说：“我再也不重复造轮子了”，同样我推荐使用Vant，只需要调一调样式和适配就可以了，前提是你要造一便轮子了，呜呜呜~。

5.Vant

网上导入Vant的方法一大堆，我在这再重复一便快捷安装，更多细节在官网。

1. npm导入（只是其中一种，更多去翻官网去）
# Vue 3 项目，安装最新版 Vant：
npm i vant -S

# Vue 2 项目，安装 Vant 2：
npm i vant@latest-v2 -S

2.引入组件

# 安装组件
npm i babel-plugin-import -D

// 在babel.config.js 中添加配置
// 注意：webpack 1 无需设置 libraryDirectory
{
  "plugins": [
    ["import", {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }]
  ]
}


3.使用组件
import Vue from 'vue';
import { Button } from 'vant';

Vue.use(Button);

<van-button type="primary">主要按钮</van-button>

6.better-scroll

安装什么的去这里看 better scroll官网

重难点：

let bs = new BetterScroll('.wrapper', {
                probeType: 3,
				pullUpLoad: true,
				observeDOM: true,
				click: true,
})
let bs = new BetterScroll(参数1, {参数...})

 参数1：拿到要管理的类名
   不建议直接使用.类名的方式去获取
   也不建议使用document.querySelector(".类名")的方式获取，
   因为以上获取在重名的情况下都是拿到第一个元素，而出现问题
   推荐使用ref的方式设置，通过$refs拿到，这样可以获取到某一个元素，不会造成以上问题。

参数... 一大堆参数，这里只说用到的
   probeType 是否监听实施滑动，参数(Number)：0 (默认值)不监听滑动 2 只有手指滑动时监听
                                     3 手指滑动和惯性滑动都监听 1(和2差不多，不常用1) 
     this.scroll.on('scroll', position => {

				// console.log(position.y);打印当前滑动y轴
			})


   pullUpLoad 是否监听滑动到底部，Boolean ，滑到底部时触发方法pullingUp。
      this.scroll.on('pullingUp', () => {
				// console.log("上拉加载更多");
                //执行上拉加载更多操作
				this.scroll.finishPullUp();//完成操作后告诉pullingUp已经操作完成了
			})

   observeDOM 实时计算所有元素高度，和this.scroll.refresh()效果一样

   this.scroll.scrollTo(x, y, time);滑动到某位置，x轴位置，y轴位置，time中间滑动的时间

7.TabContentBar

这个tabcontentbar是我手写的，写出来不难，就调样式的时候有点费劲，还不如用Vant的。

<div class="tabcontent">
	<div v-for="(item,index) in titles" class="tabtext-item" 
                // 遍历item数量，item数据从axios请求而来
				:class="{active: index ===currentindex}"
                // 当前选中页面设定
				@click="changeindex(index)" >
                //监听点击，改变选中
	<span class="tabtext-child">{{item}}</span>
                //item文字
</div>

主要样式如下：

      父div       
        display: flex;
		margin-bottom: 0.375rem;
		background-color: white;
		height: 2.5rem;
      子item
        flex: 1;
		text-align: center;
      吸顶效果
        position:sticky;
        top:44px;

8.CommodityList

商品列表，手撕的。每一行有两个，样式如下：

父div
        display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
子item
        都是字体，样式，边距之类的，自己慢慢调

9.细节问答

1.better-scroll滑动导致tabcontentbar失效？

这个没有办法，只能使用狸猫换太子的方法，监听滑动距离(元素的offsetTop属性)，到达特定位置时候，

用v-show替换原来的tabcontentbar，让原来的tabcontentbar隐藏。

2.防抖动处理频繁加载问题？


debounle(()=>{
//频繁加载实践
},500);

function debounle(func,delay){
  let timer = null;
  retuen (...args)=>{
    if(timer) clearnTimeout(timer)
    timer = setTimeout(()=>{
      func.apply(this,args)
      },delay);
  }
}

3.bus总线解决跨维度数据传输？

//1.注册$bus
Vue.prototype.$bus = new Vue()

//2.任何位置发起事件
this.$bus.$emit("aaa")

//3.任何位置接收事件
this.$bus.$on("aaa",()=>{
  //处理aaa事件
  console.log("aaa事件已被处理")
})