微信小程序使用scroll-view 标签实现内容上下或左右滑动

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;
}