mui折叠板+vue 实现滚动以及标题吸顶的效果

吸顶的效果：先写好一个div块，并且定位到顶部，初始时隐藏，当某个标题到达顶部时显示该div块，已达到吸顶效果。

注意：为什么不能用css自带的sticky或者直接改变块元素的属性的原因是：使用mui组件的折叠板，其各个内容块是包含了标题和内容的，并且都是相对定位的，一旦改变原有的块，则会使整个折叠板的样式变乱。

html：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
  <link rel="stylesheet" href="../../css/mui.min.css">
  <link rel="stylesheet" href="../../css/style.css">
  <title>消息-事件详情</title>
</head>
<body>
<div class="inDetail-page" id="inDetailPage">
  <!--去顶部图标-->
  <div class="topIcon" id="inTopIcon" v-show="topVisible"></div>
  <!--头部-->
  <header class="mui-bar mui-bar-nav inDetail-header">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">消 息</h1>
  </header>
  <div class="fixed-bar" id="fixedBar">
    <p><span class="sub-box-pre"></span><span id="fixed-title">{{fixedTitle}}</span></p>
  </div>
  <!--内容-->
  <div id="refreshContainer" class="mui-scroll-wrapper">
    <!--滚动区域-->
    <div class="mui-scroll">
      <!--标题-->
      <div class="title-box">
        <div class="title-text">
          <p>
            <span class="detail-icon"></span>阅读&nbsp;<span>{{readNum}}</span>&nbsp;|&nbsp;点赞&nbsp;<span>{{goodNum}}</span>&nbsp;|&nbsp;评论数量&nbsp;<span>{{commentNum}}</span>
          </p>
          <p>{{title}}</p>
          <p>{{newsTime}}</p>
        </div>
      </div>
      <!--内容--折叠面板-->
      <div class="inDetail-collapse">
        <!--多个折叠板可展开的写法-->
         <ul class="mui-table-view">
           <li class="mui-table-view-cell mui-collapse">
             <a class="mui-navigate-right" href="#"><span class="sub-box-pre"></span><span
                     class="sub-text">事件简介</span></a>
             <div class="mui-collapse-content">
               <p class="ev-info">{{eventInfo}}</p>
             </div>
           </li>
         </ul>
         <ul class="mui-table-view">
           <li class="mui-table-view-cell mui-collapse">
             <a class="mui-navigate-right" href="#"><span class="sub-box-pre"></span><span
                     class="sub-text">关键词云</span></a>
             <div class="mui-collapse-content">
               <div id="wordCloud" class="chart-box"></div>
             </div>
           </li>
         </ul>
         <ul class="mui-table-view">
           <li class="mui-table-view-cell mui-collapse">
             <a class="mui-navigate-right" href="#"><span class="sub-box-pre"></span><span
                     class="sub-text">关系图谱</span></a>
             <div class="mui-collapse-content">
               <div id="relateSpec" class="chart-box"></div>
             </div>
           </li>
         </ul>
         <ul class="mui-table-view">
           <li class="mui-table-view-cell mui-collapse">
             <a class="mui-navigate-right" href="#"><span class="sub-box-pre"></span><span
                     class="sub-text">正负面影响</span></a>
             <div class="mui-collapse-content">
               <div class="influ-box">
                 <div class="left-title influ-title">正面影响&nbsp;{{posNum}}%</div>
                 <div class="left-box"></div>
                 <div class="center-title influ-title">中性影响&nbsp;{{neuNum}}%</div>
                 <div class="center-box"></div>
                 <div class="right-title influ-title">负面影响&nbsp;{{nagNum}}%</div>
                 <div class="right-box"></div>
               </div>
             </div>
           </li>
         </ul>
         <ul class="mui-table-view">
           <li class="mui-table-view-cell mui-collapse">
             <a class="mui-navigate-right" href="#"><span class="sub-box-pre"></span><span
                     class="sub-text">热门信息</span></a>
             <div class="mui-collapse-content">
               <ul id="newsUl" class="news-list">
                 <li v-for="item in hotData" :data-url="item.url" :data-id="item.id">
                   {{item.source}}：{{item.title}}
                 </li>
               </ul>
             </div>
           </li>
         </ul>
         <ul class="mui-table-view">
           <li class="mui-table-view-cell mui-collapse">
             <a class="mui-navigate-right" href="#"><span class="sub-box-pre"></span><span
                     class="sub-text">渠道分析</span></a>
             <div class="mui-collapse-content">
               <div class="chart-box" id="chanel"></div>
             </div>
           </li>
         </ul>

        <!--只有一个可展开折叠板的写法-->
        <!--<ul class="mui-table-view">
          <li class="mui-table-view-cell mui-collapse">
            <a class="mui-navigate-right" href="#"><span class="sub-box-pre"></span><span
                    class="sub-text">事件简介</span></a>
            <div class="mui-collapse-content">
              <p class="ev-info">{{eventInfo}}</p>
            </div>
          </li>
          <li class="mui-table-view-cell mui-collapse">
            <a class="mui-navigate-right" href="#"><span class="sub-box-pre"></span><span
                    class="sub-text">关键词云</span></a>
            <div class="mui-collapse-content">
              <div id="wordCloud" class="chart-box"></div>
            </div>
          </li>
          <li class="mui-table-view-cell mui-collapse">
            <a class="mui-navigate-right" href="#"><span class="sub-box-pre"></span><span
                    class="sub-text">关系图谱</span></a>
            <div class="mui-collapse-content">
              <div id="relateSpec" class="chart-box"></div>
            </div>
          </li>
          <li class="mui-table-view-cell mui-collapse">
            <a class="mui-navigate-right" href="#"><span class="sub-box-pre"></span><span
                    class="sub-text">正负面影响</span></a>
            <div class="mui-collapse-content">
              <div class="influ-box">
                <div class="left-title influ-title">正面影响&nbsp;{{posNum}}%</div>
                <div class="left-box"></div>
                <div class="center-title influ-title">中性影响&nbsp;{{neuNum}}%</div>
                <div class="center-box"></div>
                <div class="right-title influ-title">负面影响&nbsp;{{nagNum}}%</div>
                <div class="right-box"></div>
              </div>
            </div>
          </li>
          <li class="mui-table-view-cell mui-collapse">
            <a class="mui-navigate-right" href="#"><span class="sub-box-pre"></span><span
                    class="sub-text">热门信息</span></a>
            <div class="mui-collapse-content">
              <ul id="newsUl" class="news-list">
                <li v-for="item in hotData" :data-url="item.url" :data-id="item.id">
                  {{item.source}}：{{item.title}}
                </li>
              </ul>
            </div>
          </li>
          <li class="mui-table-view-cell mui-collapse">
            <a class="mui-navigate-right" href="#"><span class="sub-box-pre"></span><span
                    class="sub-text">渠道分析</span></a>
            <div class="mui-collapse-content">
              <div class="chart-box" id="chanel"></div>
            </div>
          </li>
        </ul>-->
      </div>
    </div>
  </div>
</div>
<script src="../../js/mui.min.js"></script>
<script src="../../plugin/flexible.min.js"></script>
<script src="../../plugin/echarts/echarts.min.js"></script>
<script src="../../plugin/echarts/echarts-wordcloud.min.js"></script>
<script src="../../plugin/vue.js"></script>
<script src="../../config/config.js"></script>
<script src="../../js/common/common.js"></script>
<script src="../../js/message/incidentDetail.js"></script>
</body>
</html>

var incidentPage = new Vue({
  el: '#inDetailPage',
  data: {
    title: '', // 事件名称
    dataList: [],
    isSensitive: 0, // 是否是敏感事件
    topVisible: false, // 向上按钮是否可见
    fixedTitle: '',
    eventId: ''
  },
  mounted() {
    var that = this;
    document.addEventListener('plusready', function () {
      var eventId = plus.webview.currentWebview().eventId;
      that.eventId = eventId;
      that.initMui();
    });
  },
  methods: {
    initMui() {
      mui('.mui-scroll-wrapper').scroll({
        scrollY: true, // 是否竖向滚动
        scrollX: false, // 是否横向滚动
        startX: 0, // 初始化时滚动至x
        startY: 0, // 初始化时滚动至y
        indicators: false, // 是否显示滚动条
        deceleration: 0.0005, // flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
        bounce: true // 是否启用回弹,
      });

      var self = this;

      /**
       * 绑定toTop事件
       */
      document.getElementById('inTopIcon').removeEventListener('click', this.toTop, false);
      document.getElementById('inTopIcon').addEventListener('click', this.toTop, false);

      // self.singleExpend();
      self.severalExpend();
    },

    /**
     * 以下是当只有一个ul.mui-table-view包含了所有事件分类的情况是滚动固定的操作,即只有一个可展开时的操作
     */
    singleExpend() {
      var self = this;
      var fixedBar = document.getElementById('fixedBar');

      // offsetTop是元素距离上方元素的位置
      var expendEles = document.getElementsByClassName('mui-collapse');
      var len = expendEles.length;

      /**
       * 为fixedBar添加监听点击事件，如果点击的是已经打开的，则收缩，否则展开
       */
      fixedBar.addEventListener('click', function (e) {
        if (self.hasClassName(fixedBar.getElementsByTagName('p')[0], 'drop')) {
          for (let i = 0; i < len; i++) {
            if (self.fixedTitle === expendEles[i].getElementsByClassName('sub-text')[0].innerText) {
              expendEles[i].classList.remove('mui-active');
              self.toTop();
            }
          }
        } else {
          for (let i = 0; i < len; i++) {
            // expendEles[i].classList.remove('mui-active');
            expendEles[i].getElementsByTagName('a')[0].className = 'mui-navigate-right';
            if (self.fixedTitle === expendEles[i].getElementsByClassName('sub-text')[0].innerText) {
              expendEles[i].classList.add('mui-active');
              fixedBar.style.display = 'none';
              // self.toTop();
            }
          }
        }
      });
      /**
       * 点击每一个li时都调用toTop
       */
      mui('.mui-table-view').on('tap', 'li', function (e) {
        self.toTop();
      });
      /**
       * 监听滚动事件 -- 超过10.00rem出现去顶部的按钮
       */
      document.querySelector('.mui-scroll-wrapper').addEventListener('scroll', function (e) {
        var tfStyle = document.getElementsByClassName('mui-scroll')[0].style.transform;
        var scrollTop = parseInt(tfStyle.split(',')[1].split('px')[0]);
        if (Math.abs(scrollTop) > 200) {
          self.topVisible = true;
        } else {
          self.topVisible = false;
        }
        var top = (Math.abs(scrollTop) / 20 - 5.28); // 转换成rem单位计算
        if (top > 0) {
          for (let i = 0; i < len; i++) {
            if (self.hasClassName(expendEles[i], 'mui-active') && (expendEles[i].offsetTop / 20.0) <= top) {
              fixedBar.style.display = 'flex';
              self.fixedTitle = expendEles[i].getElementsByClassName('sub-text')[0].innerText;
              for (var j = 0; j < len; j++) {
                expendEles[j].getElementsByTagName('a')[0].className = 'mui-navigate-right';
              }
              fixedBar.getElementsByTagName('p')[0].className = self.hasClassName(expendEles[i], 'mui-active') ? 'drop' : '';
            }
          }
        } else {
          for (var k = 0; k < len; k++) {
            expendEles[k].getElementsByTagName('a')[0].className = 'mui-navigate-right';
          }
          fixedBar.style.display = 'none';
        }
      });
    },

    /**
     * 当每个都可展开时，即用不同的ul.mui-table-view包含每一个展开块时的操作
     */
    severalExpend() {
      var self = this;
      var fixedBar = document.getElementById('fixedBar');

      // offsetTop是元素距离上方元素的位置
      var expendEles = document.getElementsByClassName('mui-table-view');
      var len = expendEles.length;
      /**
       * 监听滚动事件 -- 超过10.00rem出现去顶部的按钮
       */
      document.querySelector('.mui-scroll-wrapper').addEventListener('scroll', function (e) {
        var tfStyle = document.getElementsByClassName('mui-scroll')[0].style.transform;
        var scrollTop = parseInt(tfStyle.split(',')[1].split('px')[0]);
        if (Math.abs(scrollTop) > 200) {
          self.topVisible = true;
        } else {
          self.topVisible = false;
        }
        var top = (Math.abs(scrollTop) / 20); // 转换成rem单位计算
        if (top > 0) {
          for (var i = 0; i < len; i++) {
            if (self.hasClassName(expendEles[i].getElementsByClassName('mui-collapse')[0], 'mui-active') && (expendEles[i].offsetTop / 20.0) <= top) {
              fixedBar.style.display = 'flex';
              self.fixedTitle = expendEles[i].getElementsByClassName('sub-text')[0].innerText;
              for (var j = 0; j < len; j++) {
                expendEles[j].getElementsByTagName('a')[0].className = 'mui-navigate-right';
              }
              if (i < len - 1 && (expendEles[i + 1].offsetTop / 20.0) - top <= 1.76) { // 当top大于第一个div但第二个div还没完全移上去
                expendEles[i + 1].getElementsByTagName('a')[0].className = 'highlight mui-navigate-right'; // 并且下一个也要高亮
                fixedBar.style.top = (expendEles[i + 1].offsetTop / 20.0 - top + 0.4) + 'rem';
              } else {
                fixedBar.style.top = '2.20rem';
              }
              fixedBar.getElementsByTagName('p')[0].className = self.hasClassName(expendEles[i], 'mui-active') ? 'drop' : '';
            }
          }
        } else {
          for (var k = 0; k < len; k++) {
            expendEles[k].getElementsByTagName('a')[0].className = 'mui-navigate-right';
          }
          fixedBar.style.display = 'none';
        }
      });
    },

    /**
     * 滚动到顶部
     */
    toTop(e) {
      mui('.mui-scroll-wrapper').scroll().scrollTo(0, 0, 100); // 100毫秒滚动到顶
    },

    /**
     * 是否含有某个类名
     */
    hasClassName(obj, className) {
      return obj.className.indexOf(className) !== -1;
    }
  }
});

mui折叠板+vue 实现滚动以及标题吸顶的效果

猜你喜欢