欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue懸浮可拖拽懸浮按鈕的實(shí)例代碼

 更新時(shí)間：2019年08月20日 09:43:18   作者：乖摸摸頭  
這篇文章主要介紹了vue懸浮可拖拽懸浮按鈕的實(shí)例代碼，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

前言

vue開發(fā)手機(jī)端懸浮按鈕實(shí)現(xiàn)，可以拖拽，滾動(dòng)的時(shí)候收到里邊，不影響視線

github地址

使用，基于vue-cli3.0+webpack 4+vant ui + sass+ rem適配方案+axios封裝，構(gòu)建手機(jī)端模板腳手架 vue-h5-template

后續(xù)將發(fā)布各種商城組件組件，讓商城簡單高效開發(fā)

 

線上體驗(yàn)

 

使用

將 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: {
 // 點(diǎn)擊按鈕
 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>

參數(shù)

字段名 類型 默認(rèn)值 描述
padding String '10 10 10 10' 懸浮按鈕可拖拽的安全范圍，與 css padding 傳參一致
scoller String '' 監(jiān)聽頁面滾動(dòng)容器 id,不傳時(shí)候監(jiān)聽 window （解決滾動(dòng)時(shí)懸浮框按鈕不收進(jìn)去）

注意

如果滾滾動(dòng)的時(shí)候收到里邊，需要穿scoller參數(shù)

比如：

你的滾動(dòng)列表外層div 設(shè)置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>

因?yàn)槟憧赡苁褂媒M件導(dǎo)致監(jiān)聽的滾動(dòng)元素是window，所以你需要將你的滾動(dòng)容器的id傳進(jìn)我的組件

總結(jié)

以上所述是小編給大家介紹的vue懸浮可拖拽懸浮按鈕的實(shí)例代碼，希望對(duì)大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！

相關(guān)文章

最新評(píng)論