固定条组件

固定条组件 fixbar 是指当滚动条滑动时，始终固定在页面一侧的工具条元素，除了内置的 TOP 条功能外，还可以灵活地扩展任意自定义的工具条。在 2.x 版本中，fixbar 属于 util 模块的子集。

示例

  <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>自定义固定条示例 - Layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="//unpkg.com/layui@2.9.20/dist/css/layui.css" rel="stylesheet">
</head>
<body>
<div id="target-test" style="position: relative; padding: 16px;">
  页<br>面<br>内<br>容<br>。<br>。<br>。<br>。<br>。<br>。<br>。<br>。<br>。<br>。<br>。<br>。<br>。<br>。<br>。<br>。<br>。<br>。<br>。<br>。<br>。<br>。<br>。<br>。<br>。<br>。<br>。<br>。<br>。<br>。<br>。<br>。<br>。<br>。<br>。<br>。<br>。<br>。<br>。<br>。<br>。<br>。<br>。<br>。
</div>
<script src="//unpkg.com/layui@2.9.20/dist/layui.js"></script>
<script>
layui.use(function(){
  var util = layui.util;
  // 自定义固定条
  util.fixbar({
    bars: [{ // 定义可显示的 bar 列表信息 -- v2.8.0 新增
      type: 'share',
      icon: 'layui-icon-share'
    }, {
      type: 'help',
      icon: 'layui-icon-help'
    }, { 
      type: 'cart',
      icon: 'layui-icon-cart',
      style: 'background-color: #FF5722;'
    }, {
      type: 'groups',
      content: '群',
      style: 'font-size: 21px;'
    }],
    // bar1: true,
    // bar2: true,
    // default: false, // 是否显示默认的 bar 列表 --  v2.8.0 新增
    // bgcolor: '#393D52', // bar 的默认背景色
    // css: {right: 100, bottom: 100},
    // target: '#target-test', // 插入 fixbar 节点的目标元素选择器
    // duration: 300, // top bar 等动画时长（毫秒）
    on: { // 任意事件 --  v2.8.0 新增
      mouseenter: function(type){
        layer.tips(type, this, {
          tips: 4, 
          fixed: true
        });
      },
      mouseleave: function(type){
        layer.closeAll('tips');
      }
    },
    // 点击事件
    click: function(type){
      console.log(this, type);
      // layer.msg(type);
    }
  });
});
</script>
</body>
</html>

API

API	描述
var util = layui.util	获得 `util` 模块。
util.fixbar(options)	fixbar 组件渲染，核心方法。

渲染

util.fixbar(options);

参数 options : 基础属性配置项。#详见属性

属性

属性名	描述	类型	默认值
bars ^2.8+	设置固定工具条列表。可支持定义以下子属性： `bars: [ { type: '', // bar 类型名，用于事件区分 icon: '', // bar 图标的 className content: '', // bar 任意内容 style: '' // bar 任意样式 }, // … ]` 该属性比较灵活，具体用法可参考：#示例	array
default ^2.8+	是否显示默认的固定条，如 `top` （点击可让滚动条置顶）等	boolean	`true`
bgcolor	固定条的默认背景色	string	-
css	工具条外层容器的任意 css 属性。如设置工具条的坐标： `css: {right: 32, bottom: 32}`	object	-
target ^2.8+	插入固定条的目标元素选择器	object	`body`
scroll ^2.8+	固定条最外层容器滚动条所在的元素，若不设置则默认取 `target` 属性值	object	`body`
margin ^2.8+	用于设置默认 `TOP` 条出现滚动条的高度临界值	number	`200`
duration ^2.8+	用于默认 `TOP` 条等动画时长	number	`200`
on ^2.8+	用于定义固定条列表的任意事件，触发事件时的回调将返回 `bars` 属性的 `type` 值。 `on: { // 点击事件 click: function(type){ // bars 对属性应的 type 值 console.log(type); }, // … }` 该属性一般与 `bars` 属性搭配使用，具体用法可参考：#示例	object	-

贴士

灵活运用 bars 属性的 content,style 子属性，可实现更多丰富多样的固定条。