基于vant商城组件库

前言

商城常用的组件开发基于vant ui开发，让商城开发变得更简单

以我整理的vue项目脚手架vue-h5-template为基础
开发商城组件库，高度组件化github地址

在这里你可以找到

1. 可拖拽悬浮按钮
2. 横向滚动导航栏
3. 。。。

线上体验

可拖拽悬浮按钮

vue开发手机端悬浮按钮实现，可以拖拽，滚动的时候收到里边，不影响视线

将 src/components文件夹下的s-icons组件放到你的组件目录下
使用组件

 // template
<template>
  <div> 
    <float-icons padding="10 10 60 10" class="icons-warp">
      <div class="float-icon-item">
        <img src="../../assets/images/home-icon.png" alt="" @click="handleIcons('home')">
        <span>首页</span>
      </div>
      <div class="float-icon-item">
        <img src="../../assets/images/cart-icon.png" alt="" @click="handleIcons('cart')">
        <span>购物车</span>
      </div>
    </float-icons>
  </div>
</template>

<script>
import FloatIcons from '@/components/s-icons'
export default {
  components: {
    'float-icons': FloatIcons
  },
   
  methods: {
    // 点击按钮
    handleIcons(router) {
      console.log('router', router)
      this.$router.push(router)
    }
  }
}
</script>
<style lang='scss' scoped>
.icons-warp {
  border-radius: 25px;
  .float-icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 50px;
    height: 50px;
    img {
      width: 25px;
      height: 25px;
      margin-bottom: 3px;
    }
    span {
      font-size: 9px;
      color: #666666;
    }
  }
}
</style>  

参数

字段名	类型	默认值	描述
padding	String	'10 10 10 10'	悬浮按钮可拖拽的安全范围，与 css padding 传参一致
scoller	String	''	监听页面滚动容器 id,不传时候监听 window （解决滚动时悬浮框按钮不收进去）

注意

如果滚滚动的时候收到里边，需要穿scoller参数
比如：
你的滚动列表外层div 设置id

    <div id="loadmore">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <van-cell v-for="item in list" :key="item" :title="`我是你的小仙女，爱你第${item}遍`" />
      </van-list>
    </div>

组件传参 scoller="loadmore"

<float-icons **scoller="loadmore"**  padding="10 10 60 10" class="icons-warp">
      
</float-icons>

因为你可能使用组件导致监听的滚动元素是window，所以你需要将你的滚动容器的id传进我的组件

横向滚动导航栏

基于better-scroll开发，横向滚动导航栏

使用

将组件复制到你的组件目录下，传导航数组list ,注意你要修改barName，num为你自己的对象属性
点击切换navbar的时候触发change方法，

参数

字段名	类型	默认值	描述
list	Array	[]	导航数组

事件

事件名	说明	回调参数
change	切换导航项	{index: 该点击项的索引值,item:该点击项数据}

关于我

您可以扫描添加下方的微信并备注 Sol 加交流群，给我提意见，交流学习。

如果对你有帮助送我一颗小星星（づ￣3￣）づ╭❤～