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 相关文章推荐
Mootools 1.2 手风琴(Accordion)教程
Sep 15 Javascript
jQuery Selector选择器小结
May 06 Javascript
json格式的时间显示为正常年月日的方法
Sep 08 Javascript
js的window.showModalDialog及window.open用法实例分析
Jan 29 Javascript
jQuery实现仿腾讯迷你首页选项卡效果代码
Sep 17 Javascript
javascript实现别踩白块儿小游戏程序
Nov 22 Javascript
jQuery-1.9.1源码分析系列(十一)DOM操作续之克隆节点
Dec 01 Javascript
JS操作JSON方法总结(推荐)
Jun 14 Javascript
Google 地图API资料整理及详细介绍
Aug 06 Javascript
详解Vue的computed(计算属性)使用实例之TodoList
Aug 07 Javascript
react同构实践之实现自己的同构模板
Mar 13 Javascript
js实现点击上传图片并设为模糊背景
Aug 02 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/03/28 PHP
php中的比较运算符详解
2013/10/28 PHP
在PHP上显示JFreechart画的统计图方法
2013/11/03 PHP
PHP自定义函数格式化json数据示例
2016/09/14 PHP
JQuery 学习笔记 选择器之二
2009/07/23 Javascript
jQuery插件开发基础简单介绍
2013/01/07 Javascript
html5 canvas js(数字时钟)实例代码
2013/12/23 Javascript
结合JQ1.9通过js正则判断各种浏览器版本的方法
2013/12/30 Javascript
jquery live()调用不存在的解决方法
2014/02/26 Javascript
javascript生成随机颜色示例代码
2014/05/05 Javascript
jQuery解决IE6、7、8不能使用 JSON.stringify 函数的问题
2016/05/31 Javascript
Node.js如何自动审核团队的代码
2016/07/20 Javascript
jQuery实现发送验证码并60秒倒计时功能
2016/11/25 Javascript
Vue.js第四天学习笔记
2016/12/02 Javascript
Javascript基础回顾之(一) 类型
2017/01/31 Javascript
深入理解js中的加载事件
2017/02/08 Javascript
深入对Vue.js $watch方法的理解
2017/03/20 Javascript
JavaScript循环_动力节点Java学院整理
2017/06/28 Javascript
利用jQuery实现简单的拖曳效果实例代码
2017/10/20 jQuery
Python3.2模拟实现webqq登录
2016/02/15 Python
玩转python爬虫之爬取糗事百科段子
2016/02/17 Python
Python基于正则表达式实现检查文件内容的方法【文件检索】
2017/08/30 Python
python绘制简单折线图代码示例
2017/12/19 Python
Python使用一行代码获取上个月是几月
2018/08/30 Python
eclipse创建python项目步骤详解
2019/05/10 Python
python爬虫项目设置一个中断重连的程序的实现
2019/07/26 Python
解决pytorch GPU 计算过程中出现内存耗尽的问题
2019/08/19 Python
Python 使用指定的网卡发送HTTP请求的实例
2019/08/21 Python
给你一面国旗 教你用python画中国国旗
2019/09/24 Python
Python timeit模块的使用实践
2020/01/13 Python
python3.9实现pyinstaller打包python文件成exe
2020/12/13 Python
纯CSS3实现的8种Loading动画效果
2014/07/05 HTML / CSS
瑰珀翠美国官网:Crabtree & Evelyn美国
2016/11/29 全球购物
惠普新加坡官方商店:HP Singapore
2020/04/17 全球购物
2014年师德师风工作总结
2014/11/25 职场文书
校运会宣传稿大全
2015/07/23 职场文书