前言

Vue开发了一个手机侧悬浮按钮，可以拖拽，滚动时收在里面，不影响视线

Github地址

使用基于vue-CLI 3.0 web pack 4 vantui sassrem适配方案的axios包为手机模板支架搭建vue-h5-template

未来将发布各种商城组件，让商城变得简单高效

在线体验

使用

将s图标组件放在组件目录的src/components文件夹下

使用组件

//template template div float-icons padding=' 10 10 60 10 ' class=' icons-warp ' div class=' float-icon-item ' img src=' http :/./assets/images/Home-icon . png ' alt=' ' @ click=' handleconos(' Home ')' span主页/span/div class=' float-icon-item ' img src=' http 3360././assets/images/Cart-icon . png ' alt=' ' @ click=' handleconos(' Cart ')' span购物车/span/div/float-icons/div/template script从' @/components/S-icons '导入float icons导出默认{ components : { ' float-icons ' : float icons }，方法： {//单击按钮处理图标(路由器){console.log ('router '，router)此。$ router . push(router)} } }/script style lang=' SCS ' scoped . icons-warp { border-radius : 25px；浮动图标项{ display: flexflex-direction:柱；align-items:居中；justice-content : center；相对位置：宽度： 50px；高度： 50px；img { width: 25px高度： 25px；保证金-底部： 3px；} span { font-size : 9px；color: # 666666} }}/style参数

字段名类型的默认值描述了填充字符串“10 10 10 10 10”浮动按钮可以拖动的安全范围，与css填充传输参数一致。scoller String ' '监视页面滚动容器id，并在不传输时监视窗口(以解决滚动时不包括浮动框按钮的问题)注意

如果在滚动时收到，则需要佩戴scoller参数

例如：

滚动列表的外部div设置id

div id=' load more ' van-list v-model=' loading ' : finished=' finished ' finished-text=' no more ' @ load=' on load ' van-cell v-for=' item in list ' : key=' item : title=' I '我是你的小仙女，我爱你第${item}次` '/van-list /div组件引用scolar=' loadmore '

floating-icons * * s coller=' load more ' * * padding=' 10 10 60 10 ' class=' icons-warp '/floating-icons因为您可能使用组件，所以您正在收听的滚动元素是window，因此您需要将滚动容器的id传递到my component中。

摘要

以上是边肖介绍的vue悬浮拖放悬浮按钮的示例代码。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你的！