zoukankan      html  css  js  c++  java
  • 页面view高度计算

    我们很多时候有这样一个需求:我们的页面分为上下两个部分或者更多,上半部分或用了固定的rpx设置了高度,我们想要剩下一部分的高度刚好占满剩余窗口的部分。 
    先来看看页面:

    代码如下:

    wxml

    <view class="class_first">
      第一部分内容,高度是固定的rpx
    </view>
    <view class="class_second" style="height:{{second_height}}px">
      第二部分内容,高度为窗口剩余部分的高度
    </view>

    wxss

    .class_first{
      background-color: #666666;
      color: #fff;
      /* 高度固定300rpx */
      height: 300rpx; 
    }
    
    .class_second{
      background: #e5e5e5;
      color: #000;
    }

    js

    Page({
      data: {
        second_height:0
      },
      onLoad: function () {
        console.log('onLoad')
        var that = this
        // 获取系统信息
        wx.getSystemInfo({
          success: function (res) {
            console.log(res);
            // 可使用窗口宽度、高度
            console.log('height=' + res.windowHeight);
            console.log('width=' + res.windowWidth);
            // 计算主体部分高度,单位为px
            that.setData({
              // second部分高度 = 利用窗口可使用高度 - first部分高度(这里的高度单位为px,所有利用比例将300rpx转换为px)
              second_height: res.windowHeight - res.windowWidth / 750 * 300
            })
          }
        })
      }
    })
  • 相关阅读:
    chapter1 Qt入门
    base64加密解密
    vue+CryptoJS+cookie实现保存账号密码
    js计时器
    Elenent ui中的表单校验规则、自定义校验规则、预验证功能
    js获取文件后缀
    js中如何将有字符串转换为数组,或将数组转换为字符串
    vue-router
    Vue项目纯前端导出word文档
    async/await
  • 原文地址:https://www.cnblogs.com/chenmiaosong/p/9239936.html
Copyright © 2011-2022 走看看