当前位置: 首页 > Web前端 > CSS

小程序实现水平滑块,超过10个就会出现,查看更多

时间:2023-03-31 10:46:36 CSS

需求是在小程序的banner下面加一个横向滑块,用来展示主题列表1.思路是使用scroll-view+scroll-x="true"2.我遇到的问题是:10多个之后,我添加了点击更新多个块始终显示在底部。解决方法是:在最后点击的more块中添加vertical-align:top;HTML:ahhhhhhh¥456{{index}}+10查看所有项目CSS.special-list{宽度:100%;高度:307rpx;溢出:隐藏;填充:20rpx0038rpx;背景:#fff;空白:nowrap;。特别的-滚动{高度:330rpx;宽度:自动;溢出:隐藏;}.special-item{高度:184rpx;宽度:184rpx;显示:内联块;右边距:40rpx;背景色:#aaa;.image{高度:184rpx;宽度:184rpx;}}.name{字体大小:20rpx;颜色:$normalGrayFont;-webkit-line-clamp:1;溢出:隐藏;显示:-weblit-box;分词:break-all;文本溢出:省略号;}.price{字体大小:28rpx;}.special-item-last{高度:184rpx;宽度:184rpx;边框:2rpx实心#ddd;边界半径:2rpx;显示:内联块;右边距:40rpx;文本对齐:居中;垂直对齐:顶部;填充:44rpx0;}}最后效果