在微信小程序实现横向滑动时，使用scroll-view标签，然后给它设置一个scroll-x，感觉就可以实现元素的横向排列，可以左右滑动。 官网文档如下所示 https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html 但是在实际开发中会遇到各种问题，本文主要通过具体编写代码实现一个横向滑动的功能 本文背景最近在实现类似驾考宝典顶部题库切换的效果，但是跟驾考宝典不同的是，这里存在很多题库，所以需要用到scroll-view，横向滑动 刚开始实现起来有几个坑，这里捋一下 本文内容本文主要具体实现一个可横向滑动的功能，具体界面如下图所示 [图片] 需要注意的两点是： 1）给scroll-view 加以下样式  width: 100%;white-space: nowrap;   2）子元素display：inline-block； 这个地方在外面父元素就不要加flex布局的相关属性了。 具体的样式代码为 [图片] 代码片段为 https://developers.weixin.qq.com/s/annR87m87ElG [图片] 参考文档 Scroll-View 组件的scroll-x属性不起作用? - 微信开放社区 https://developers.weixin.qq.com/community/develop/doc/0000e080e18d800a66079775d51000 scroll-view横向滚动：客户端和开发工具显示不一样，客户端错位? - 微信开放社区 https://developers.weixin.qq.com/community/develop/doc/000c44af69c1006e1ce6de9805d800 本文总结 本文主要具体实现一个可横向滑动的功能 附 代码片段一 由于编辑器对wxml代码片段展示有问题，这段代码放在评论区。 代码片段二 const app = getApp() Page({ data: { arr: [] }, onReady: function () { const arr = [] for (let i = 0; i < 20; i++) arr.push(i) this.setData({ arr }) } }) 代码片段三 .scroll-box { width: 100%; white-space: nowrap; } .scroll-box .box{ display:inline-block } 其他