微信小程序scroll-view横向滚动和纵向滚动实现（亲测管用）

原创已于 2022-02-17 13:51:49 修改 · 1.4w 阅读

22 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

微信小程序

于 2021-12-27 20:29:30 首次发布

本文介绍了微信小程序中如何通过`scroll-view`组件实现横向和纵向滚动，包括设置`scroll-x`属性进行横向滚动，设置`scroll-into-view`指定滚动目标，并展示了关键代码片段。同时，讲解了如何在页面加载时自动滚动到特定元素。

微信小程序横向滚动

//wxml
			<scroll-view scroll-x="true" style=" white-space: nowrap; display: flex" 
			scroll-into-view="{{rightId}}" >
	 		<view    style="display: inline-block">1</view>
	 		<view     style="display: inline-block">2</view>
	 		<view     style="display: inline-block">3</view>
	 		<view    style="display: inline-block">4</view>
	 		<view   id="select_title"  style="display: inline-block">5</view>
</scroll-view>
//wxss
#select_title{
	color: #F2A669;
}

scroll-x=“true” style=" white-space: nowrap; display: flex" 开启横向滚动必须设置的
scroll-into-view="{{rightId}}" 设置滚动到那个元素的参数接收一个id名
id=“select_title” id名
4.子元素必须设置 style=“display: inline-block”

//js
data:{
	rightId:null
	},
	//页面加载时
	onLoad：function(){
this.setData({
			rightId: 'select_title',
		})
}

微信小程序纵向滚动

//wxml
			  <scroll-view scroll-y   scroll-into-view="{{scrollTopName}}" >
	 		<view>1</view>
	 		<view>2</view>
	 		<view>3</view>
	 		<view>4</view>
	 		<view   id="scrollTabTop"  >5</view>
	 		</scroll-view>
//wxss
#scrollTabTop{
height:100vh;
  background-color: #F6F6F6;
}

1.必须设置高度

//js
data:{
	scrollTopName:null
	},
	//页面加载时
	onLoad：function(){
this.setData({
			scrollTopName: 'scrollTabTop',
		})
}

标签

#微信小程序 #小程序 #前端