admin 管理员组

文章数量: 1184232

小程序scroll

小程序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文档

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

本文标签： 小程序scroll

版权声明：本文标题：小程序scroll 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1688304747a203885.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。