uni-app 小程序实现scroll-view 横向滑动效果的坑
最大盒子要100%高度,scroll-view的宽度不能设置固定宽度;
复制 <scroll-view class="bottomBox" scroll-x="true" @scroll="scroll">
<view @click="go(i)" class="commodity" v-for="(item,i) in list" :key="i">
{{item.title}}
</view>
</scroll-view>
list: [{
id: 1,
title: "111"
}, {
id: 2,
title: "2222"
}, {
id: 3,
title: "3333"
}, {
id: 4,
title: "3333"
},
{
id: 5,
title: "3333"
},
],
此外无论是组件还是写在一个页面内 最大的盒子记得加上height:100%;
.bottomBox {
width: 100%; // 一定不能给固定宽度,会失效
height: 100%;
background-color: aqua;
white-space: nowrap; //这个属性一定要添加
padding: 20upx;
.commodity {
display: inline-block;//这个也是一定要添加的
width: 196upx;
height: 360upx;
margin-right: 11upx;
background-color: pink;
}
}
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步