微信小程序页面滚动scroll-view记录
实现功能:
使用scroll-view实现滚动部分内容在页面指定范围上下滚动。
实现结果:
目前暂无问题。
代码:
页面布局
clientBottom是计算出来的底部位置
<scroll-view scroll-y="true" style="bottom:{{ clientBottom }}px">
<!-- 滚动页面内容 -->
</scroll-view>
<view class="example">我用到的一个例子</view>
js
data: {
clientBottom: 0
},
onLoad: function() {
var self = this
wx.getSystemInfo({
success: (res) => {
// 通过query获取'example'盒子的高度
let query = wx.createSelectorQuery().in(self)
let scrollBottom = 0
query.select('.example').boundingClientRect()
query.exec(res => {
scrollBottom = res[0].height
self.setData({
clientBottom: scrollBottom
})
})
},
})
}
wxss样式
scroll-view {
position: fixed;
top: 0;
}
参考链接:https://www.jianshu.com/p/caf03b79549c