小程序随着滑动page—container高度变长怎么实现
时间: 2024-05-22 12:14:55 浏览: 10
您好,关于小程序页面滑动时Page-Container高度变长的实现方法,我可以为您提供一些帮助。首先,可以通过监听页面滚动的事件,获取滚动的距离,然后动态设置Page-Container组件的高度来实现。具体的实现代码可以参考以下示例:
wxml代码:
<view class="container">
<view class="wrapper">
<view class="item" wx:for="{{list}}">
{{item}}
</view>
</view>
</view>
js代码:
Page({
data: {
list: [1, 2, 3, 4, 5],
wrapperHeight: 0, // 总容器的高度
},
onLoad() {
// 获取页面容器的高度
wx.createSelectorQuery().select('.wrapper').boundingClientRect((rect) => {
this.setData({
wrapperHeight: rect.height,
});
}).exec();
},
onPageScroll(e) {
// 获取滚动的距离
const scrollTop = e.scrollTop;
// 根据滚动距离动态设置容器高度
this.setData({
wrapperHeight: scrollTop + this.data.wrapperHeight,
});
},
});
CSS代码:
.container {
height: 100vh;
overflow: hidden;
}
.wrapper {
transition: height 200ms ease;
}
.item {
height: 100px;
background-color: #ccc;
margin-bottom: 10px;
}
以上代码只是作为一个参考示例,具体的实现还需要根据您的实际需求进行调整和优化。希望这些信息能对您有所帮助,如果还有其他问题请随时向我提问。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)