小程序swiper和scroll-view结合使用

1,427 阅读1分钟

最近在改代码,总是遇到swiper和scroll-view结合使用,但前几次都给它改成别的方式了,因为我不会改!这次决定搞搞清楚。使用以下代码可以正常显示数据了。

以下使用方法是 scroll-view嵌套在swiper中

<view>
    // swiper 要设置高度才生效
    <swiper :style="{ height: windowHeight - 40+'px'}">
        <swiper-item>
            // scroll-view 要设置高度才显示(突然发现在支付宝小程序中可以不设置高度,用盒子撑开也可以)
            // show-scrollbar、enhanced不显示滚动条
            <scroll-view scroll-y="true" :style="{ height: windowHeight - 40+'px' }" 
                      :show-scrollbar="false" :enhanced="true">
                <view>
                   …………
                </view>
            </scroll-view>
        </swiper-item>
    </swiper>
</view>

<script>
export default {
    data(){
        return{
            windowHeight:0,
        }
    },
    onReady() {
        // 获取系统信息
        uni.getSystemInfo({
            success: res => {
                // windowHeight可使用窗口高度,单位px
                this.windowHeight = res.windowHeight;
            }
        });
    },
}
</script>

另外一种使用方法,swiper与scroll-view单独使用:

# 小程序scroll-view和swiper结合使用

# swiper+scroll-view实现滑动切换内容

scroll-view与swiper对比:

# swiper与scroll-view对比(实现水平slider)