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 相关文章推荐
用YUI做了个标签浏览效果
Feb 20 Javascript
基于jQuery的左右滚动实现代码
Dec 03 Javascript
学习javascript,实现插入排序实现代码
Jul 31 Javascript
node.js中的fs.createWriteStream方法使用说明
Dec 17 Javascript
深入理解JS函数的参数(arguments)的使用
May 28 Javascript
bootstrap与Jquery UI 按钮样式冲突的解决办法
Sep 23 Javascript
jQuery插件fullPage.js实现全屏滚动效果
Dec 02 Javascript
微信小程序侧边栏滑动特效(左右滑动)
Jan 23 Javascript
解决bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题
Jun 05 Javascript
jQuery zTree树插件的使用教程
Aug 16 jQuery
使用easyui从servlet传递json数据到前端页面的两种方法
Sep 05 Javascript
小程序登录之支付宝授权的实现示例
Dec 13 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
简单实用的.net DataTable导出Execl
2013/10/28 PHP
yii的CURD操作实例详解
2014/12/04 PHP
jQuery Clone Bug解决代码
2010/12/22 Javascript
jquery命令汇总,方便使用jquery的朋友
2012/06/26 Javascript
使用js dom和jquery分别实现简单增删改
2014/09/11 Javascript
jQuery中[attribute!=value]选择器用法实例
2014/12/31 Javascript
jQuery实现可编辑的表格实例讲解(2)
2015/09/17 Javascript
JavaScript高级教程5.6之基本包装类型(详细)
2015/11/23 Javascript
JavaScript 动态三角函数实例详解
2017/01/08 Javascript
Angular2 路由问题修复详解
2017/03/01 Javascript
JS三目运算(三元运算)方法详解
2017/03/01 Javascript
Vue表单验证插件Vue Validator使用方法详解
2017/04/07 Javascript
JavaScript 获取元素在父节点中的下标(推荐)
2017/06/28 Javascript
JS 60秒后重新发送验证码的实例讲解
2017/07/26 Javascript
在 webpack 中使用 ECharts的实例详解
2018/02/05 Javascript
ES6与CommonJS中的模块处理的区别
2018/06/13 Javascript
Vue调用后端java接口的实例代码
2019/10/28 Javascript
JS实现百度搜索框关键字推荐
2020/02/17 Javascript
解决vue+webpack项目接口跨域出现的问题
2020/08/10 Javascript
python基于itchat实现微信群消息同步机器人
2017/02/27 Python
windows下python之mysqldb模块安装方法
2017/09/07 Python
详解Python中的分组函数groupby和itertools)
2018/07/11 Python
基于python3实现倒叙字符串
2020/02/18 Python
python实现飞船游戏的纵向移动
2020/04/24 Python
教你使用Sublime text3搭建Python开发环境及常用插件安装另分享Sublime text3最新激活注册码
2020/11/12 Python
python爬取豆瓣电影排行榜(requests)的示例代码
2021/02/18 Python
美国折扣香水网站:The Perfume Spot
2020/12/12 全球购物
三个Unix的命令面试题
2015/04/12 面试题
安全生产管理责任书
2014/04/16 职场文书
立案决定书范文
2015/06/24 职场文书
消夏晚会主持词
2015/06/30 职场文书
SQLServer 日期函数大全(小结)
2021/04/08 SQL Server
Python使用openpyxl批量处理数据
2021/06/23 Python
Redis性能监控的实现
2021/07/09 Redis
SpringBoot中使用Redis作为全局锁示例过程
2022/03/24 Java/Android
python中redis包操作数据库的教程
2022/04/19 Python