vue开发手机端悬浮按钮实现,可以拖拽,滚动的时候收到里边,不影响视线
github地址
使用,基于<代码> vue-cli3.0 + webpack 4 + vant ui + sass + rem 适配方案+ axios封装,构建手机端模板脚手架vue-h6-template
后续将发布各种商城组件组件,让商城简单高效开发
, 
<强>使用
将src/组件文件夹下的s-icons组件放到你的组件目录下
<强>使用组件
//模板
& lt; template>
& lt; div>
& lt; float-icons填充=" 10 10 60”类=癷cons-warp”比;
& lt; div类=癴loat-icon-item”比;
& lt; img src=" https://www.yisu.com/assets/images/home-icon.png " @click=癶andleIcons(‘回家’)”在
& lt; span>首页& lt;/span>
& lt;/div>
& lt; div类=癴loat-icon-item”比;
& lt; img src=" https://www.yisu.com/assets/images/cart-icon.png " @click=癶andleIcons(“购物车”)“比;
& lt; span>购物车& lt;/span>
& lt;/div>
& lt;/float-icons>
& lt;/div>
& lt;/template>
& lt; script>
从“@/组件/导入FloatIcons s-icons”
出口默认{
组件:{
“float-icons”: FloatIcons
},
方法:{//点击按钮
handleIcons(路由器){
控制台。日志(路由器,路由器)
美元。router.push(路由器)
}
}
}
& lt;/script>
& lt;风格lang=' scss ' scoped>
.icons-warp {
border - radius: 25 px;
.float-icon-item {
显示:flex;
flex-direction:列;
对齐项目:中心;
justify-content:中心;
位置:相对;
宽度:50 px;
高度:50 px;
img {
宽度:25 px;
高度:25 px;
margin-bottom: 3 px;
}
跨度{
字体大小:9 px;
颜色:# 666666;
}
}
}
& lt;/style>
参数
字段名
类型
默认值
描述
填充
字符串
“10 10 10 10”
悬浮按钮可拖拽的安全范围,与css填充传参一致
scoller
字符串
＇＇
监听页面滚动容器id、不传时候监听窗口(解决滚动时悬浮框按钮不收进去)
如果滚滚动的时候收到里边,需要穿scoller参数
比如:
你的滚动列表外层div设置id
& lt; div id=發oadmore”比;
& lt; van-list v模型=凹釉亍?完成=巴瓿伞蓖瓿傻奈谋?懊挥懈嗔恕癅load=皁nLoad”比;
& lt; van-cell v=跋钅苛斜怼?关键=跋睢?title=啊蔽沂悄愕男∠膳?爱你第${项}遍’”/比;
& lt;/van-list>
& lt;/div>
组件传参<代码> scoller=發oadmore”
& lt; float-icons * * scoller=* *填充“loadmore”=?0 10 60”class=癷cons-warp”比;
& lt;/float-icons>
因为你可能使用组件导致监听的滚动元素是窗口,所以你需要将你的滚动容器的id传进我的组件
以上所述是小编给大家介绍的vue悬浮可拖拽悬浮按钮的实例代码,希望对大家有所帮助,如果大家有任何疑问欢迎给我留的言,小编会及时回复大家的!
