vue悬浮可拖拽悬浮按钮的实例代码


Posted in Javascript onAugust 20, 2019

前言

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

github地址

使用,基于vue-cli3.0+webpack 4+vant ui + sass+ rem适配方案+axios封装,构建手机端模板脚手架 vue-h5-template

后续将发布各种商城组件组件,让商城简单高效开发

 vue悬浮可拖拽悬浮按钮的实例代码

线上体验

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传进我的组件

总结

以上所述是小编给大家介绍的vue悬浮可拖拽悬浮按钮的实例代码,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
JavaScript中几个重要的属性(this、constructor、prototype)介绍
May 19 Javascript
javascript实现3D变换的立体圆圈实例
Aug 06 Javascript
APP中javascript+css3实现下拉刷新效果
Jan 27 Javascript
非常实用的js验证框架实现源码 附原理方法
Jun 08 Javascript
JavaScript原生节点操作小结
Jan 17 Javascript
微信小程序 生命周期和页面的生命周期详细介绍
Jan 19 Javascript
JavaScript中object和Object的区别(详解)
Feb 27 Javascript
Angular2 之 路由与导航详细介绍
May 26 Javascript
通过源码分析Vue的双向数据绑定详解
Sep 24 Javascript
js限制输入框只能输入数字(onkeyup触发)
Sep 28 Javascript
微信小程序实现商城倒计时
Nov 01 Javascript
vue实现短信验证码登录功能(流程详解)
Dec 10 Javascript
JS中的算法与数据结构之链表(Linked-list)实例详解
Aug 20 #Javascript
使用 webpack 插件自动生成 vue 路由文件的方法
Aug 20 #Javascript
微信小程序webview与h5通过postMessage实现实时通讯的实现
Aug 20 #Javascript
JS中的算法与数据结构之队列(Queue)实例详解
Aug 20 #Javascript
JS中的算法与数据结构之栈(Stack)实例详解
Aug 20 #Javascript
小程序如何在不同设备上自适应生成海报的实现方法
Aug 20 #Javascript
使用 Vue 实现一个虚拟列表的方法
Aug 20 #Javascript
You might like
如何判断php数组的维度
2013/06/10 PHP
php第一次无法获取cookie问题处理
2014/12/15 PHP
php计算整个mysql数据库大小的方法
2015/06/19 PHP
php构造方法中析构方法在继承中的表现
2016/04/12 PHP
Laravel5中防止XSS跨站攻击的方法
2016/10/10 PHP
PHP互换两个变量值的方法(不用第三变量)
2016/11/14 PHP
php安装php_rar扩展实现rar文件读取和解压的方法
2016/11/17 PHP
php封装的验证码类分享
2017/02/26 PHP
浅谈PHP匿名函数和闭包
2019/03/08 PHP
JavaScript对象模型-执行模型
2008/04/28 Javascript
JSON 客户端和服务器端的格式转换
2009/08/27 Javascript
js 控制图片大小核心讲解
2013/10/09 Javascript
详解AngularJS中module模块的导入导出
2015/12/10 Javascript
JS正则表达式完美实现身份证校验功能
2017/10/18 Javascript
js实现复制功能(多种方法集合)
2018/01/06 Javascript
Javascript的this详解
2019/03/23 Javascript
JavaScript中的this妙用实例分析
2020/05/09 Javascript
JS轮播图的实现方法
2020/08/24 Javascript
在vue中动态修改css其中一个属性值操作
2020/12/07 Vue.js
[34:27]DOTA2上海特级锦标赛B组败者赛 VG VS Spirit第一局
2016/02/26 DOTA
Python安装Imaging报错:The _imaging C module is not installed问题解决方法
2014/08/22 Python
web.py中调用文件夹内模板的方法
2014/08/26 Python
Python之文字转图片方法
2018/05/10 Python
python找出因数与质因数的方法
2019/07/25 Python
django数据模型on_delete, db_constraint的使用详解
2019/12/24 Python
Python如何实现大型数组运算(使用NumPy)
2020/07/24 Python
python如何随机生成高强度密码
2020/08/19 Python
简单的HTML5初步入门教程
2015/09/29 HTML / CSS
团工委书记自荐书范文
2013/12/17 职场文书
初中毕业生的自我评价
2014/03/03 职场文书
机关单位工作失职检讨书
2014/11/20 职场文书
2014年防汛工作总结
2014/12/08 职场文书
房地产公司财务总监岗位职责
2015/04/03 职场文书
HR在给员工开具离职证明时,需要注意哪些问题?
2019/07/03 职场文书
励志语录:你若不勇敢,谁替你坚强
2019/11/08 职场文书
MySQL锁机制
2021/04/05 MySQL