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

最新推荐文章于 2025-04-15 11:51:40 发布

湾流~

最新推荐文章于 2025-04-15 11:51:40 发布

阅读量5.9k

点赞数 2

分类专栏： mpvue 小程序相关文章标签：小程序微信 html5

本文链接：https://blog.csdn.net/qq_40955816/article/details/120123745

版权

小程序相关同时被 2 个专栏收录

12 篇文章

订阅专栏

mpvue

1 篇文章

订阅专栏

本文详细介绍了微信小程序中scroll-view标签的使用，包括设置scroll-x实现左右滑动，white-space:nowrap和行内块元素的应用，以及scroll-y和固定高度实现上下滚动。同时给出了相应的HTML和CSS代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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