scroll-view标签微信官方介绍
scroll-view标签属性 : scroll-x 为x轴(左右滑动),scroll-y为y轴(上下滑动)
左右滑动
scroll-view标签需要设置white-space: nowrap;里面的元素要设置为行内块元素
html
<scroll-view scroll-x >
<view class="templateitem" v-for="(item,index) in xxx" style=" width: 200px; height: 200px; background: green;">
<image class="live" src="item.url"></image>
</view>
</scroll-view>
css
scroll-view {
white-space: nowrap; //不换行
}
.templateitem{
display: inline-block; //行内块元素
width:102px;
height:187px;
}
上下滑动
scroll-view 标签要有一个高度
html
<scroll-view scroll-y >
<view class="templateitem" v-for="(item,index) in xxx" style=" width: 200px; height: 200px; background: green;">
<image class="live" src="item.url"></image>
</view>
</scroll-view>
css
scroll-view {
height:500px;
}
.templateitem{
width:100%;
height:187px;
}