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