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 相关文章推荐
jquery队列queue与原生模仿其实现方法分享
Mar 25 Javascript
JavaScript事件委托用法分析
Jan 24 Javascript
如何使用Vuex+Vue.js构建单页应用
Oct 27 Javascript
微信小程序 input输入框详解及简单实例
Jan 10 Javascript
html5 canvas 详细使用教程
Jan 20 Javascript
JavaScript 异步调用
Oct 25 Javascript
vue项目中使用axios上传图片等文件操作
Nov 02 Javascript
JavaScript原型对象、构造函数和实例对象功能与用法详解
Aug 04 Javascript
微信小程序实现提交input信息到后台的方法示例
Jan 19 Javascript
JavaScript实现多张图片放大镜效果示例【不限定图片尺寸,rem单位】
May 14 Javascript
微信小程序 可搜索的地址选择实现详解
Aug 28 Javascript
js防抖函数和节流函数使用场景和实现区别示例分析
Apr 11 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生成图片验证码-附五种验证码
2015/08/19 PHP
PHP创建PowerPoint2007文档的方法
2015/12/10 PHP
PHP数据库编程之MySQL优化策略概述
2017/08/16 PHP
PHP容器类的两种实现方式示例
2019/07/24 PHP
Extjs中DisplayField的日期或者数字格式化扩展
2010/09/03 Javascript
JQ获取动态加载的图片大小的正确方法分享
2013/11/08 Javascript
js形成页面的一种遮罩效果实例代码
2014/01/04 Javascript
js/jquery解析json和数组格式的方法详解
2014/01/09 Javascript
JavaScript中的正则表达式简明总结
2014/04/04 Javascript
NodeJS学习笔记之Http模块
2015/01/13 NodeJs
探索angularjs+requirejs全面实现按需加载的套路
2016/02/26 Javascript
设计模式中的facade外观模式在JavaScript开发中的运用
2016/05/18 Javascript
详解JavaScript常量定义
2017/01/03 Javascript
jQuery分页插件jquery.pagination.js使用方法解析
2017/02/09 Javascript
Javascript实现基本运算器
2017/07/15 Javascript
基于JavaScript实现图片连播和联级菜单实例代码
2017/07/28 Javascript
微信小程序radio组件使用详解
2018/01/31 Javascript
js的新生代垃圾回收知识点总结
2019/08/22 Javascript
JavaScript实现轮播图片完整代码
2020/03/07 Javascript
vue实现图片上传到后台
2020/06/29 Javascript
python开发利器之ulipad的使用实践
2017/03/16 Python
Python中动态创建类实例的方法
2017/03/24 Python
Python Numpy库安装与基本操作示例
2019/01/08 Python
Python 获取 datax 执行结果保存到数据库的方法
2019/07/11 Python
对python中url参数编码与解码的实例详解
2019/07/25 Python
python opencv如何实现图片绘制
2020/01/19 Python
python3爬虫中多线程进行解锁操作实例
2020/11/25 Python
HTML5应用之文件上传
2016/12/30 HTML / CSS
Tenstickers法国:墙贴和装饰贴纸
2019/08/26 全球购物
意大利辅助药品、药物和补品在线销售:FarmaEurope
2020/04/29 全球购物
学生安全教育材料
2014/02/14 职场文书
新任教师自我鉴定
2014/02/24 职场文书
优秀班主任材料
2014/12/16 职场文书
新闻简讯格式及范文
2015/07/22 职场文书
读《推着妈妈去旅行》有感1500字
2019/10/15 职场文书
Redis 常见使用场景
2021/08/30 Redis