1.豎向滾動(dòng)
wxml文件
<!--pages/list/index.wxml-->
<scroll-view class="container1" scroll-y>
<view>A</view>
<view>B</view>
<view>C</view>
</scroll-view>
wxss文件
/* pages/list/index.wxss */
.container1 view{
display: inline-block;
width:100px;
height:100px;
text-align: center;
line-height: 100px;
}
.container1 view:nth-child(1){
background-color: lightblue;
}
.container1 view:nth-child(2){
background-color: lightcoral;
}
.container1 view:nth-child(3){
background-color: lightgreen;
}
.container1{
border: 1px solid red;
width: 100px;
height: 120px;
}
?
?
?
2.橫向滾動(dòng)
wxml文件
<!--pages/list/index.wxml-->
<scroll-view class="container1" scroll-x>
<view>A</view>
<view>B</view>
<view>C</view>
</scroll-view>
wxss文件
/* pages/list/index.wxss */
.container1 view{
display: inline-block;
width:100px;
height:100px;
text-align: center;
line-height: 100px;
}
.container1 view:nth-child(1){
background-color: lightblue;
}
.container1 view:nth-child(2){
background-color: lightcoral;
}
.container1 view:nth-child(3){
background-color: lightgreen;
}
.container1{
display: flex;
justify-content: space-around;
white-space:nowrap;
border: 1px solid red;
width: 120px;
height: 100px;
}
?
?
注意事項(xiàng)：
1、在scroll-view標(biāo)簽上加上樣式屬性：display:flex;?white-space:nowrap；
2、scroll-view標(biāo)簽下的一級(jí)欄目標(biāo)簽需要加上樣式屬性：display: inline-block;文章來源：http://www.zghlxwxcb.cn/news/detail-546321.html
只有結(jié)合上面兩步，才能實(shí)現(xiàn)橫向滾動(dòng)。文章來源地址http://www.zghlxwxcb.cn/news/detail-546321.html
到了這里，關(guān)于【微信小程序】scroll-view滾動(dòng)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
