[小程序开发]动态改变scroll-view的高度

2024年8月9日 11:19 by wst

小程序

---

问题

接上篇文章，这里给出更有的解决方案。

不同的机型高度不一样，怎么设置Scroll-View的高度呢？

由于页面中固定高度的部分（推荐菜品、购物车、tabbar），中间“菜品区”的高度设置就成了一个难题。

解决方法

获取整个窗口的可用高度，然后减去固定高度，把减得的结果作为scroll-view的高度。具体代码如下：

    calSrollHeight() {
        var that = this
        var query = wx.createSelectorQuery().in(this)
        query.select('.top').boundingClientRect()
        query.select('.nav-bar').boundingClientRect()
        query.exec(res => {
            let topHeight = res[0].height;
            let navHeight = res[1].height;
            let tabHeight = that.data.tbHeight;
            let windowHeight = wx.getSystemInfoSync().windowHeight;
            let scrollHeight = windowHeight - topHeight - navHeight - tabHeight;
            console.log("scrollHeight:", scrollHeight)
            this.setData({ scrollHeight })
        })
    },

其中tabbar的高度tabHeight的获取方式为：

在自定义tabbar组件中，获取tabbar的高度。

    ready() {
        const query = wx.createSelectorQuery().in(this)
        query.select('.tab-bar').boundingClientRect((rect) => {
            console.log("rect.height:", rect.height)
            // 缓存tabbar栏的高度
            if (wx.getStorageSync("tabbarHeight") == undefined || wx.getStorageSync("tabbarHeight") == 0) {
                wx.setStorageSync('tabbarHeight', rect.height)
            }

        }).exec()
    },

菜品区的代码：

<scroll-view style="height: {{scrollHeight}}px" scroll-into-view="c{{activeCategoryId}}" class="dish-nav" scroll-y="{{true}}">
            <!-- 商品类型 -->
            <view wx:for="{{category}}" wx:key="id" id="c{{item.id}}" class="{{activeCategoryId === item.id ? 'active' : ''}}" data-id="{{item.id}}" bindtap="handleCategoryClick">
                {{item.name}}
                <!-- 类型红点start -->
                <view wx:for="{{categoryarr}}" wx:for-item="ordered" wx:for-index="ordered_index" wx:key="ordered_key" class="{{ordered.id === item.id ? 'categorynum' : ''}}">
                    <view wx:if="{{ordered.id === item.id}}" class="categorynum">
                        {{ordered.number}}
                    </view>
                </view>
                <!-- 类型红点end -->
            </view>
            <!-- 占位，防止购物车图标遮挡。dish-nav: padding-bottom 无效 -->
            <view style="height: 100rpx;border: none"></view>
        </scroll-view>

总结

学到的知识还是基础，只有在实践中才能成长。共勉！

 

---