✨✨使用jq+layui的layer+laytpl实现横屏查看功能✨✨

使用jq+layui的layer+laytpl实现横屏查看功能

✨一、实现功能

🌟技术框架
1. 使用layui.layer弹出层实现横屏内容展示
2. 使用layui.laytpl模板引擎实现table内容的填充
🌟功能详情
1. 详情页面展示列表内容以及横屏查看按钮
2. 点击横屏查看将列表内容实现成横向展示
3. 横屏内点击关闭按钮可回到详情页面
4. 详情列表页面默认请求5条数据，若请求的列表数据超过5条，则会展示查看更多按钮，每点击一次查看更多，则数据增加5条
5. 点击横屏展示默认请求5条数据，横屏内查看更多功能与详情列表一致
6. 当关闭横屏展示页面之后，详情页面的数据不重置，点击查看更过等操作，会继续添加

✨二、百句描述不如一眼官图：效果图如图展示：

✨三、代码

🍀html文件🍀

html 复制代码

 <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/index.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/layui/2.9.10/css/layui.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/layui/2.9.10/layui.js"></script>
  <script src="./js/remcalc.js"></script>
</head>

<body>
  <div class="panel-container table-container">
    <div id="tableTitle">
      <div class="table-title-text">表格数据：</div>
      <div class="table-title-view">
        <img src="./imgs/rotation.png" alt="">横屏查看
      </div>
    </div>
    <div id="tableContainer"></div>
  </div>
</body>

</html>

🍗css文件🍗

css 复制代码

/**
* 卡片内容
*/
.panel-container {
  margin-top: 0.1rem;
  background: #FFFFFF;
  padding: 0 0.15rem;
}

/* 列表容器 */
.table-container {
  padding: 0.15rem;
  /*min-height: 2.56rem;*/
  box-sizing: border-box;
  overflow: hidden;
}

#tableTitle {
  display: flex;
  justify-content: space-between;
}

.table-title-text {
  font-weight: 500;
  font-size: 0.13rem;
  color: #1F241F;
  line-height: 0.2rem;
}

.table-title-view {
  font-weight: 500;
  font-size: 0.12rem;
  color: #1C71F1;
}

.table-title-view img {
  width: 0.15rem;
  height: 0.15rem;
  margin-right: 0.05rem;
}

/* 操作 */
.toOption {
  color: #1C71F1!important;
}


/* 列表列表 */
#tableContainer {
  width: 100%;
  /*min-height: 1.8rem;*/
  margin-top: 0.15rem;
  overflow: hidden;
}
.table-box{
  width: 100%;
  overflow: auto;
}

.table {
  width: 100%;
}

/* 表头 */
.table th {
  box-sizing: border-box;
  min-width: 0.75rem;
  height: 0.3rem;
  padding: 0.05rem 0.14rem;
  background: #1C71F1;
  font-weight: 500;
  font-size: 0.13rem;
  color: #FFFFFF;
  text-align: center;
  line-height: 0.2rem;
  border: 1px solid #E6E6E6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.table td {
  min-width: 0.75rem;
  height: 0.3rem;
  color: #636363;
  line-height: 0.3rem;
  font-size: 0.11rem;
  text-align: center;
  font-weight: 400;
  border: 1px solid #E6E6E6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 第一列*/
.table td:first-child {
  color: #333333;
  font-weight: 500;
}

/* 查看更多 */
.more-list {
  padding: 0.15rem 0;
  text-align: center;
  border-bottom: 1px dashed #D8D8D8;
}

.layui-btn-normal{
  width: 1.38rem;
  height: 0.35rem;
  background: linear-gradient( 90deg, #3CAAF9 0%, #1C71F1 100%)!important;
  border-radius: 0.2rem!important;
  font-weight: 500;
  font-size: 0.12rem;
  color: #FFFFFF;
  line-height: 0.22rem;
}


/**
* 横屏查看
*/
.largeScreen-box {
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100%;
  overflow: hidden;
  background: #FFFFFF
}

/* 关闭按钮 */
.largeScreen-box .layui-layer-setwin {
  top: auto!important;
  right: 0.3rem!important;
}

#largeScreen {
  position: absolute;
  transform: rotate(90deg);
  transform-origin: 0 0;
  overflow: auto;
}

🌼script内部🌼

js 复制代码

<script>
  var total = 0
  layui.use(['layer', 'laytpl'], function () {
    var $ = layui.jquery, layer = layui.layer, laytpl = layui.laytpl;

    /**
     * 列表参数
     */
    var tableParams = {
      page: 1,
      limit: 5,
    }
    var pageLimitCache = 5
    var taskTableId = 'tableContainer'

    /**
     * 初始化
     */
    function init() {
      getTableListRequest()
    }
    init()

    /**
     * 获取数据请求
     */
    function getTableListRequest() {
      // $.ajax({
      //   type: 'POST',
      //   contentType: 'application/json',
      //   url: "",
      //   data: tableParams,
      //   dataType: 'json',
      //   success: function (res) {
      //     渲染列表
      //     renderContent(res.data)
      // mock数据
      let res = {
        count: 20,
        data: [
          { name: '小明', age: 19, gender: 'male', address: '幸福大街656号美丽家园6号楼8单元20楼', grade: '优异', hobby: '读书、跑步', dream: '健康幸福一生', skilledness: '全能' },
        ]
      }

      if (res.data && res.data.length) {
        res.data = Array(tableParams.limit).fill(res.data[0]);

        total = res.count || 10
        renderTableList(res.data)
      }
      //   },
      //   error: function (err) {
      //     console.log(err)
      //   }
      // });
    }


    /**
      * 渲染项目内容列表
      */
    function renderTableList(resData) {
      // 渲染项目内容列表
      var getTableContainerChunk = tableContainerChunk.innerHTML,
        tableContainer = document.getElementById(taskTableId);
      laytpl(getTableContainerChunk).render(resData, function (html) {
        tableContainer.innerHTML = html;
      });

      $('#' + taskTableId + ' .more-list-btn').click(function () {
        tableParams.limit += 5
        getTableListRequest()
      })
    }

    // 横屏查看
    $('.table-title-view').click(function () {
      layer.open({
        skin: 'largeScreen-box',
        type: 1,
        title: false,
        content: '<div id="largeScreen"></div>',
        success: function () {
          taskTableId = 'largeScreen'
          // 计算横屏宽高
          const ow = $('.layui-layer-content').width()
          const oh = $('.layui-layer-content').height()

          // 减少30宽度
          var boh = oh - 30

          // 横屏竖屏宽高切换
          $('#largeScreen').width(boh)
          $('#largeScreen').height(ow)

          $('#largeScreen').css({
            'left': (ow - 10) + 'px',
            'top': '10px'
          });

          // 缓存页面的limit， 用于切换屏幕恢复当前屏的数据
          pageLimitCache = tableParams.limit

          // 每次打开横屏重置条数
          tableParams.limit = 5
          getTableListRequest()
        },
        cancel: function (index) {
          taskTableId = 'tableContainer'
          tableParams.limit = pageLimitCache

          layer.close(index)
          return false;
        }
      })
    })
  });

</script>

🌿tableContainerChunk🌿

js 复制代码

<!-- 自定义项目内容列表laytpl -->
<script id="tableContainerChunk" type="text/html">
  <div class="table-box">
      <table class="table">
          <thead class="table-header">
          <tr>
              <th>姓名</th>
              <th>年龄</th>
              <th>性别</th>
              <th>家庭地址</th>
              <th>成绩</th>
              <th>爱好</th>
              <th>梦想</th>
              <th>技能</th>
              <th>操作</th>
          </tr>
          </thead>
          <tbody>
          {{# layui.each(d, function(index, item){ }}
          <tr>
              <td>{{ item.name || '-' }}</td>
              <td>{{ item.age || '-' }}</td>
              <td>{{ item.gender || '-' }}</td>
              <td>{{ item.address || '-' }}</td>
              <td>{{ item.grade || '-' }}</td>
              <td>{{ item.hobby || '-' }}</td>
              <td>{{ item.dream || '-' }}</td>
              <td>{{ item.skilledness || '-' }}</td>
              <td>
                  <a class="toOption" href="">其他操作</a>
              </td>
          </tr>
          {{# }) }}
          </tbody>
      </table>
  </div>
  {{# if(total > 5){ }}
  <div class="more-list">
      <button type="button" class="layui-btn layui-btn-normal more-list-btn">查看更多</button>
  </div>
  {{# } }}
</script>

🌴🌴注意：
script写在html文件内