小程序上拉下拉共存时不可使用scroll-view的解决方法

Posted 电子猫

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了小程序上拉下拉共存时不可使用scroll-view的解决方法相关的知识,希望对你有一定的参考价值。

使用 bindscrolltolower ,必须搭配使用的 scroll-view 会导致小程序 "enablePullDownRefresh": true 下拉不能使用。

解决方法,就是当两者同时存在时,改 scroll-view 为 view ,改 bindscrolltolower 为 onReachBottom 函数。

这样在上拉加载,跟下拉刷新同时存在的时候, "enablePullDownRefresh": true 就可以生效了。

  • wxml
<view class="scroll-view">
    <view class="view-item"><text>text1</text></view>
    <view class="view-item"><text>text2</text></view>
    <view class="view-item"><text>text3</text></view>
    <view class="view-item"><text>text4</text></view>
    <view class="view-item"><text>text5</text></view>
    <view class="view-item"><text>text6</text></view>
    <view class="view-item"><text>text7</text></view>
    <view class="view-item"><text>text8</text></view>
    <view class="view-item"><text>text9</text></view>
</view>

 

  • wxss
.scroll-view {
    height: 1300rpx;
}
.view-item {
    width: 33.333333%;
    height: 300rpx;
    float: left;
    color: #ffff;
    background: #888;
}

 

  • js
Page({
    data: {

    },
    onLoad: function(option) {
        wx.request({

            },
            success: function(res) {

            }
        });
    },
    // 加载数据函数
    onReachBottom: function(event) {
        console.log("到底了");
    },
})

以上是关于小程序上拉下拉共存时不可使用scroll-view的解决方法的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序页面滑到到底部,继续上拉跳转到其他界面

微信小程序如何下拉刷新上拉无限推送。

微信小程序使用scroll-view自定义下拉刷新

uniapp实现下拉刷新及上拉(分页)加载更多(app,H5,小程序均可使用)

微信小程序scroll-view不能实现下拉刷新

小程序返回顶部wx.pageScrollTo和scroll-view的对比