小程序scroll-view，滚动到最低_小程序滚动到底部

小程序scroll-view，滚动到最低_小程序滚动到底部

小程序滚动条，滚到最底部解决方案1

小程序滚动到底部使用Scorll-view实现方案:

scrill-view：组件要固定高度。

scroll-y:true

scroll-top="{{scrollTop}}"

scroll-with-animation="true"

每次加载新的数据修改一下scroll-top的值即可。

css代码：

.list {
  border: 1px solid red;
  padding: 10px;
}
.list scroll-view {
  height: 350px;
}

.list .item {
  padding: 20px 10px;
  margin: 10px 0px;
  background: rgb(224, 224, 224);
}

wxml 代码：

<view class="list">
  <scroll-view scroll-y="true" scroll-top="{{scrollTop}}" scroll-with-animation="true">
    <view class="item" wx:for="{{list}}">{{item}}</view>
  </scroll-view>
</view>

js：代码

  /**
   * 页面的初始数据
   */
  data: {
    list: ['张三丰', '李四', '王五', '赵六'],
    scrollTop: 0
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var _this = this;
    var index=0;
    setInterval(() => {
      index++;
      var list = _this.data.list;
      list.push('ceshi1');
      list.push('ceshi2');
      list.push('ceshi3');
      list.push('**********'+index);
      var top = _this.data.scrollTop + list.length * 60;
      console.info(top);
      _this.setData({
        list: list,
        scrollTop: top
      });
    }, 2000);
  },

展示效果：

 

 

更多：

微信小程序使用高德地图Web服务爬取企业数据

小程序打开docx文件失败_NPOI生成的word文档

微信小程序坐标位置接口使用整理(二)地图接口