2019最新填坑微信小程序 scroll-view 滚动条保持在底部(附效果demo)

2019最新填坑微信小程序 scroll-view 滚动条保持在底部(附效果demo)_第1张图片
注意:

  1. 必须有高度 , 如果想要滚动条保持在底部 , 高度必须等于窗口的高度
  2. scroll-y='{{true}}' 必须定义元素允许纵向滚动
  3. scroll-top='{{scrollTop}}' 最后就是定义滚动条位置要求:scrollTop 必须大于 内所有元素之和
<view>
  <scroll-view style='height:{{height}}px' scroll-y='{{true}}' scroll-top='{{scrollTop}}'>
    <view wx:for="{{dataArr}}" wx:for-item> {{index}}: {{item}}view>
  scroll-view>
view>
  • 以下为js代码
// pages/test/test.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    dataArr: [1, 2, 3, 4, 5, 6, 7, 8, 9, 1, 2, 3, 4, 5, 6, 7, 8, 9, 1, 2, 3, 4, 5, 6, 7, 8, 9, 1, 2, 3, 4, 5, 6, 7, 8, 9],
    scrollY: true,
    scrollTop: 0,
    height:0
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    var that = this
    //获取当前窗口高度返回给页面使用
    var height = wx.getSystemInfoSync().windowHeight;
    //设置data数据
    that.setData({
      scrollTop: that.data.dataArr.length * 1000,
      height:height
    })
    console.log(that.data.scrollTop)
  },
})

你可能感兴趣的:(小程序)