vue懸浮可拖拽懸浮按鈕

前言

vue開發手機端懸浮按鈕實現，可以拖拽，滾動的時候收到裏邊，不影響視線
github地址
使用，基於vue-cli3.0+webpack 4+vant ui + sass+ rem適配方案+axios封裝，構建手機端模板腳手架vue-h5-template
後續將發佈各種商城組件組件，讓商城簡單高效開發

線上體驗

使用

將 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傳進我的組件

關於我

您可以掃描添加下方的微信並備註 Soul 加交流羣，給我提意見，交流學習。

如果對你有幫助送我一顆小星星（づ￣3￣）づ╭❤～