最近在改代码,总是遇到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对比: