微信小程序开发实现横向滚动

xhndlxxx

已于 2022-10-10 17:18:39 修改

阅读量1.1k

点赞数 1

分类专栏：小程序文章标签：微信小程序 javascript 前端

于 2022-10-10 17:00:09 首次发布

本文链接：https://blog.csdn.net/weixin_43968782/article/details/127248050

版权

小程序专栏收录该内容

5 篇文章 0 订阅

订阅专栏

网上搜索半天，都是一个抄一个，无果，请教老师，现把结果分享给大家

主要还是在需要滚动的外层盒子里面加overflow:hidden和white-space:nowrap;
wxml里面：

	<scroll-view scroll-x="{{true}}" class="scroll_content" >
		<view class="content">
			<view>这是一段文字</view>
		</view>
        <view class="content">
			<view>这是一段文字</view>
		</view>
        <view class="content">
			<view>这是一段文字</view>
		</view>
	</scroll-view>

wxss里面：
display:inline-block也是重点哦

	.scroll_content{
			width:100%;
			overflow:hidden;
			white-space:nowrap;
	}
	.content{
		  	margin-right: 10px;
  			padding: 6px 14px;
 		 	border-radius: 20px;
  			text-align: center;
 		 	background-color: #ef4e23;
  			color: white;
  			display:inline-block;
	}