基於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￣）づ╭❤～