wzs28150 / coolui-scroller

微信小程序下拉刷新上拉加载组件
https://wzs28150.github.io/coolui-scroller/v3/
198 stars 46 forks source link

scroller使用header的slot时,在iOS真机下会把header滚动出去 #43

Closed imwower closed 10 months ago

imwower commented 10 months ago

scroller使用header的slot时,在iOS真机下会把header滚动出去 版本号:3.3.2 当使用loadmore加载完更多的数据后,iOS真机会滚动出去,模拟器和安卓版不会。

好像是iOS真机计算scroller的height有问题

https://github.com/wzs28150/coolui-scroller/assets/1744486/50c2a339-d7c6-471e-892d-bf5e2f8836ae

示例代码:

wxml:

<scroller class="scroller"
          isEmpty="{{list.length===0}}"
          bind:loadmore="onLoadMore"
          bind:refresh="onRefresh">
    <view slot="header">
        <view>header</view>
    </view>
    <refresh slot="refresh"
             type="base"
             config="{{config}}"
    />
    <view class="default-margin-horizontal default-border store"
          wx:for="{{ list }}"
          wx:key="index"
          data-id="{{item.id}}">
        <view class="info">
            {{ item.name }}
        </view>
    </view>
    <loadmore slot="loadmore"
              status="{{loadMoreSetting.status}}"
              loading="{{loadMoreSetting.loading}}"
              noMore="{{loadMoreSetting.noMore}}"
              more="{{loadMoreSetting.more}}"/>
</scroller>

js:

Page({
    data: {
        config: {
            shake: false, // 是否开启下拉震动
            height: 70, // 下拉高度
            text: {
                color: '#FE6921', // 文字颜色
                shadow: 5, // 是否开启shadow阴影,0为不开启,数值越大阴影范围越大
            },
            background: {
                color: '#FFFFFF',
                height: 120, // 设置背景大于下拉高度
                // TODO
                // img: 'https://test.wzs.pub/pic/bg.jpg',
            },
        },
        loadMoreSetting: {
            status: 'more',
            loading: {text: '加载中...'},
            more: {text: '加载更多'},
            noMore: {text: '没有更多了'},
        },
        total: 6,
        page: {
            num: 1,
        },
        list: [],
    },

    async onLoad() {
        await this.onRefresh();
    },

    async onRefresh() {
        const page = this.data.page;
        page.num = 1;
        console.log('refresh');
        const setting = this.data.loadMoreSetting;
        setting.status = 'loading';
        this.setData({
            loadMoreSetting: setting,
        });
        const result = this.getStores();
        if (result.code === 0) {
            this.setData({
                list: result.data.list,
            });
        }
        setting.status = 'more';
        this.setData({
            loadMoreSetting: setting,
        });
    },

    async onLoadMore() {
        console.log('load more, page: ', this.data.page);
        const setting = this.data.loadMoreSetting;
        if (setting.status === 'loading') {
            return;
        }

        const page = this.data.page;
        const num = page.num + 1;
        if (num > this.data.total) {
            setting.status = 'noMore';
            this.setData({
                loadMoreSetting: setting,
            });
            return;
        }

        setting.status = 'loading';
        this.setData({
            loadMoreSetting: setting,
        });

        let result = this.getStores();
        if (result.code === 0) {
            const list = this.data.list.concat(result.data.list);
            this.setData({
                page: {
                    num: num,
                },
                list: list,
            });
        }
        setting.status = 'more';
        this.setData({
            loadMoreSetting: setting,
        });
    },

    getStores(event) {
        return {
            code: 0,
            data: {
                page: {
                    size: 10,
                    num: 1,
                    total: 2,
                },
                list: [
                    {
                        id: 1,
                        name: '店铺1',
                        address: '广东省广州市天河区',
                        phone: '123456789',
                    },
                    {
                        id: 2,
                        name: '店铺2',
                        address: '广东省广州市天河区',
                        phone: '123456789',
                    },
                    {
                        id: 3,
                        name: '店铺3',
                        address: '广东省广州市天河区',
                        phone: '123456789',
                    }
                ]
            }
        };
    },
});
wzs28150 commented 10 months ago

你访问我的demo也是这样的么?scroll组件默认高度100% 随外层变,你可以外层加一个view设置一下高度。你的底部tabBar是自己写的还是,用的官方设置出来的?是不是没减去这个的高度啊?

imwower commented 10 months ago

你访问我的demo也是这样的么?scroll组件默认高度100% 随外层变,你可以外层加一个view设置一下高度。你的底部tabBar是自己写的还是,用的官方设置出来的?是不是没减去这个的高度啊?

demo没有问题,我看了一下demo的代码,高度是固定的xxx px;所以没有问题。tabBar用的官方原生的。

我目前的解决方案是:

  1. 在.json里面增加了:
    "disableScroll": true,
  2. 给scroller外面套一层view,并动态设置view的高度为:xxx px;高度根据不同的机型计算。