微信小程序微信小程序开发小程序

动态设置scroll-view的高度以及隐藏滚动条

2018-10-30  本文已影响36人  前端来入坑
    //获取#header的高度
     var query = wx.createSelectorQuery();
      //选择id
      let that = this;
      query.select('#header').boundingClientRect(function (rect) {
          console.log("获取头部的高度成功");
          that.setData({
              headerHeight:rect.height
          });
      }).exec();

    //获取“可使用窗口”的高度(注意:不包括底下tab栏的高度)
    wx.getSystemInfo({
        success: function (res) {
          that.setData({
            scrollview:res.windowHeight-that.data.headerHeight
          })
        }
      })

wxml

<view style='height:{{scrollview}}px;'></view>

scroll-view滚动条隐藏

wxss

/* scroll-view滚动条隐藏 */
::-webkit-scrollbar{
width: 0;
height: 0;
color: transparent;
}
上一篇 下一篇

猜你喜欢

热点阅读