小程序view固定在页面底部不会随页面上下滚动变化
时间: 2023-11-06 11:04:03 浏览: 67
要实现小程序中的view固定在页面底部,可以使用`fixed`属性来实现。具体步骤如下:
1. 在wxml文件中,将需要固定在底部的view放在一个`<view>`标签中,并加上`fixed`属性和`bottom`属性,如下所示:
```
<view class="bottom" fixed bottom="0">
<!-- 需要固定在底部的内容 -->
</view>
```
2. 在对应的wxss文件中,给`bottom`类设置样式,如下所示:
```
.bottom {
width: 100%;
height: 50px; /*根据实际情况设置高度*/
background-color: #fff; /*根据实际情况设置背景颜色*/
border-top: 1px solid #eee; /*根据实际情况设置上边框*/
position: fixed;
bottom: 0;
}
```
这样设置之后,页面滑动时,底部的view会一直固定在页面底部不动。
相关问题
小程序scroll-view滚动到底部再次触发事件
可以通过监听scroll-view的scrolltolower事件来实现滚动到底部再次触发事件。当scroll-view滚动到底部时,会触发scrolltolower事件,我们可以在该事件中执行需要再次触发的逻辑。具体实现代码如下:
1. 在scroll-view组件上添加scrolltolower事件:
```
<scroll-view scrolltolower="scrollToLower">
<!-- scroll-view的内容 -->
</scroll-view>
```
2. 在Page的js文件中定义scrollToLower函数来处理scrolltolower事件:
```
Page({
data: {
// 其他数据
},
scrollToLower: function (e) {
// 滚动到底部触发的逻辑
// 再次触发事件的逻辑
},
// 其他函数
})
```
注意:scrolltolower事件的触发条件是scroll-view组件的内容高度大于组件高度且滚动到底部,如果内容高度小于组件高度,则不会触发该事件。
uniapp scroll-view 页面加载时滚动至底部
您可以在页面加载完成后,使用微信小程序的API将scroll-view滚动到底部。可以使用以下代码:
```JavaScript
uni.pageScrollTo({
scrollTop: 1000000, //将scrollTop设置为一个足够大的值,以确保它滚动到底部
duration: 0 //滚动时间设置为0,意味着立即滚动到底部
})
```
这段代码将页面滚动到了scroll-view的最底部。如果您想在页面加载时自动滚动到底部,可以直接将这段代码放在onLoad生命周期函数中即可。