小程序中scroll-view的使用_scrollview小程序-优快云博客

scroll-view

可滚动视图区域。
这里写图片描述
使用竖向滚动时，需要给一个固定高度，通过 WXSS 设置 height。

动态设置滚动条位置

可以在js中设置滚动条的位置，比如我希望设置为滚动条的高度能够撑满除底部固定按钮外的剩余界面，并在每一次点击按钮之后，往scroll-view中添加内容，并将滚动条可以移到最下方。我是这样设置的：
//wxml页面设置

<scroll-view style="height:{{srollHeight}}px;" scroll-y="true" scroll-top="{{scrollTop}}">
……
</scroll-view>

//js文件

Page({
  data: {
    scrollTop:0,
 srollHeight:300, //随便给的一个初始高度
}}）
 onShow: function () {  //在onShow中根据屏幕窗口宽度动态设置scroll-view的高度
   console.log('onShowed')
    var that = this;
    wx.getSystemInfo({
  success: function(res) {
    var height=res.windowHeight-footerpannelheight;   //footerpannelheight为底部组件的高度
   that.setData({
            srollHeight: height
        });
  }
})
 },
  clickEvent :function()  //按钮点击事件，移动滚动条
  {
      // ……   //往scroll-view中添加内容的代码省略；
        that.setData({
             scrollTop: that.data.scrollTop + 1000    //为了移到最下方，所以加一个比较大的值
        });
  },

在这个过程中，我也遇到了几个小问题:
1.在动态设置scroll-view高度的时候，当页面置于tabbar且非首页的时候，通过getSystemInfo得到的windowHeight再减去固定高度得到的值并不准确，貌似tabbar会占用一定的高度，但是小程序中并没有提供tabbar的高度，而页面置于首页或不使用tabbar时则不会出现这个问题。
2.为了移动滚动条到最下方，我的处理是直接加一个固定高度1000，其实更为准确的是加上插入内容的高度，但是因为我插入的内容的高度是不确定的，而小程序中又不支持类似于通过document获得组件元素的方法，无法动态获得插入内容的高度，因此只好采用这个比较笨的方法。
如有高手可以帮我解决这两个问题，欢迎指教，不甚感激。