vue-cdutDigitalMap/src/components/mobileBar.vue

<template>
  <div>
    <div id='mobilebarBox' class="overflow-hidden" :style="{height:detailHeight + 'px'}"  >
      <div id="content">
        <!-- 1.滑动标识 -->
        <div class="gray" style="text-align:center" @click="changeExpandClass">
            <!-- 上滑标识 -->
            <b-icon style="margin:0 auto"
              icon='chevron-compact-up'
              font-scale="1.2"
              v-show="expandClass === 0"
              variant="secondary">
            </b-icon>
             <!-- 上下滑标识 -->
            <b-icon style="margin:0 auto"
              icon='dash'
              font-scale="1.2"
              v-show="expandClass === 1"
              variant="secondary">
            </b-icon>
            <!-- 下滑标识 -->
            <b-icon style="margin:0 auto"
              icon='chevron-compact-down'
              font-scale="1.2"
              v-show="expandClass === 2"
              variant="secondary">
            </b-icon>
        </div>

        <!-- 2.搜索栏 -->
        <!-- <b-input-group
            key="sm"
            v-show="(type !== 'noticeDetail' && type !== 'cultureDetail') || isExpand === false "
            size="sm"
            class="mb-2 pr-1 pl-1"
          >
          <b-input-group-prepend is-text>
              <b-icon icon="search"></b-icon>
            </b-input-group-prepend>
            <b-form-input
              placeholder="查找单位、地点、设施"
            >
            </b-form-input>
        </b-input-group> -->

        <!-- 3.伸展栏 -->
        <div>
          <!-- 通知列表 -->
          <div id="list-div">
              <b-list-group>
                <b-list-group-item
                style="font-size:10px"
                button
                v-for="item of reportData.reportList.slice((currentPage-1)*perPage,currentPage*perPage)"
                :key="item.id"
                @click="showReportDetail(item.id)"
                >
                  <tr>
                    <td class="font-weight-bold">
                      <div class="text-truncate">{{item.title| ellipsis}}</div>
                    </td>
                  </tr>
                  <div class="listTime">{{item.time}}</div>
                </b-list-group-item>
              </b-list-group>
          </div>

          <!-- 分页栏 -->
          <div class="mt-2" id='pagin-div'>
            <b-pagination
              v-model="currentPage"
              pills
              :total-rows="rows"
              :per-page="perPage"
              align="center">
            </b-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import bus from '../../static/js/eventBus'

export default {
  name: 'MobileBar',
  data () {
    return {
      detailHeight: window.screen.height * 0.32, //  底部栏实际高度
      minHeight: 24, // 底部栏最小高度
      maxHeight: window.screen.height * 0.80, // 底部栏最大高度
      midHeight: window.screen.height * 0.32, //  底部栏中等高度
      isExpand: false, // 底部栏伸缩状态
      expandClass: 1, //  底部栏拉伸等级，0为最小，1为中，2为最大
      reportData: {
        reportList: [] // 通知列表数据
      },
      currentPage: 1, // 通知列表当前页数
      resetListener: true //  重置监听器的开关
    }
  },
  methods: {
    /**
     * @description:底部栏高度拉伸监听
     * @param {String} id:目标容器id值
     * @returns {void}
     */
    heightListener: function (id) {
      var that = this
      var resize = document.getElementById(id)
      var START_HEIGHT // 记录初始高度
      var START, END, LEN //  记录拉伸过程总起点、总终点、总长度
      var startY, endY, moveLen
      var min
      var max

      var touchStart = function (e) {
        // 获取开始坐标 clientY为鼠标的垂直坐标
        startY = e.touches[0].pageY
        START = startY
        START_HEIGHT = that.detailHeight

        e.stopPropagation()
      }

      var touchMove = function (e) {
        min = that.min
        max = that.max

        // 计算并应用位移量
        endY = e.touches[0].pageY
        moveLen = startY - endY
        startY = endY
        let tempHeight = that.detailHeight + moveLen

        // 高度限制处理
        if (tempHeight < min) {
          that.detailHeight = min
        } else if (tempHeight > max) {
          that.detailHeight = max
        } else {
          that.detailHeight = tempHeight
        }
        e.stopPropagation()
      }

      var touchEnd = function (e) {
        END = endY
        LEN = START - END

        // 上拉/下拉 响应
        if (LEN >= 100 && that.expandClass !== 2) {
          // that.isExpand = true
          if (that.expandClass !== 2) {
            that.resetListener = true
            that.expandClass += 1
          }
        } else if (LEN <= -100 && that.expandClass !== 0) {
          // that.isExpand = false
          if (that.expandClass !== 0) {
            that.resetListener = true
            that.expandClass -= 1
          }
        } else {
          that.detailHeight = START_HEIGHT
          return 0
        }

        e.stopPropagation()

        resize.removeEventListener('touchstart', touchStart)
        resize.removeEventListener('touchmove', touchMove)
        resize.removeEventListener('touchend', touchEnd)
      }

      resize.addEventListener('touchstart', touchStart, false)
      resize.addEventListener('touchmove', touchMove, false)
      resize.addEventListener('touchend', touchEnd, false)
    },

    /**
     * @description:获取报道列表数据
     * @returns {void}
     */
    getReportList: function () {
      var that = this
      this.$axios
        .get('/report/list')
        .then(function (response) {
          that.reportData.reportList = response.data
        })
    },

    /**
     * @description:将id值传给map.vue进行信息提取与渲染
     * @param {number} id:报道的id值
     */
    showReportDetail: function (id) {
      bus.$emit('showReportDetail', id)
      this.resetListener = false
      this.expandClass = 0
    },

    /**
     * @description:设置底部栏列表尺寸
     */
    setSize: function () {
      let max = this.maxHeight
      let el = document.getElementById('list-div')
      el.style.height = max - 24 - 34 - 16 + 'px'
    },

    /**
     * @description:改变底部栏扩张等级
     */
    changeExpandClass: function () {
      this.resetListener = false
      switch (this.expandClass) {
        case 0:
          this.expandClass += 1
          break
        case 1:
          this.expandClass += 1
          break
        case 2:
          this.expandClass -= 1
          break
      }
    }
  },
  watch: {
    /**
     * @description:底部栏显示、拉伸控制
     */
    expandClass () {
      switch (this.expandClass) {
        case 0:
          this.detailHeight = this.min
          break
        case 1:
          this.detailHeight = this.mid
          break
        case 2:
          this.detailHeight = this.max
          break
      }
      if (this.resetListener) {
        this.heightListener('mobilebarBox')
      }
    }
  },
  computed: {
    /**
     * @description:根据type值调整底部栏最大高度限制
     */
    max: function () {
      return this.maxHeight
    },

    /**
     * @description:根据type值调整底部栏最小高度限制
     */
    min: function () {
      return this.minHeight
    },

    /**
     * @description:根据type值调整底部栏中等高度限制
     */
    mid: function () {
      return this.midHeight
    },

    /**
     * @description: 通知列表总数目
     */
    rows: function () {
      return this.reportData.reportList.length
    },

    /**
     * @description: 最高伸展等级时通知列表每页显示数目
     */
    perPage: function () {
      return Math.floor((this.maxHeight - 34 - 16 - 24) / 42)
    },

    /**
     * @description: 中等伸展等级时通知列表单页显示数目
     */
    onePage: function () {
      return Math.floor((this.maxHeight - 34 - 16 - 24) / 42)
    }
  },
  filters: {
    /**
     * @description:过滤器，超过16位显示省略号
     */
    ellipsis: function (value) {
      if (!value) return ''
      if (value.length > 18) {
        return value.slice(0, 18) + '...'
      }
      return value
    }
  },
  mounted () {
    this.heightListener('mobilebarBox')
    this.getReportList()
    this.setSize()
    // this.busOnAction()
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
* {
  -webkit-text-size-adjust: none;
}
.text-truncate{
  margin-left:32px;
  border-bottom: 4px solid #87BF96;
  padding-bottom: 0px;
  font-size: 11px;
  -webkit-text-size-adjust: none;
  /*top:50%;*/
  /*transform: translateY(-50%);*/
  height:18px;

}
/*分页栏上的数字*/
/deep/ .page-item.active .page-link{
  background-color: #87BF96!important;
  border-color: #87BF96!important;
}

.font-weight-bold{
  font-family: "Noto Sans SC";
  font-weight: 200;
}
.list-group-item {
  height:42px;
  padding: 0;
  border:none;
}
.listTime {
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  right:32px;
  /* font-family: "Source Han Sans CN"; */
  font-family: 'Noto Sans SC';
  font-weight: 100;
  font-size: 11px;
}
#pagin-div {
  position: relative;
  /* bottom: 0; */
  left: 50%;
  transform: translateX(-50%);
}
#mobilebarBox {
  border-radius: 7px;
}
</style>