微信小程序 scroll-view设置scroll-x无法横向显示和滑动的解决方案

9月前作者：呦，写bug呢分类：Toy博客阅读(47) 违法举报

这篇具有很好参考价值的文章主要介绍了微信小程序 scroll-view设置scroll-x无法横向显示和滑动的解决方案。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

<scroll-view scroll-x class="moduleView">
    <view class="modulItemView">1</view>
    <view class="modulItemView">2</view>
    <view class="modulItemView">3</view>
</scroll-view>

仅仅设置 scroll-x无法实现横向排列和滑动？还需在scroll-view和子view的wxss样式里进行如下设置

.moduleView {
    white-space:nowrap;
}

.modulItemView{
    display: inline-block;
}

如果想在子view里使用弹性布局 display:flex ，也可以这样：文章来源地址https://www.toymoban.com/news/detail-758224.html

<scroll-view scroll-x class="moduleView">
     <view style="display:flex; flex-direction:row;">
         <view class="modulItemView">1</view>
         <view class="modulItemView">2</view>
         <view class="modulItemView">3</view>
     </view>

</scroll-view>


.moduleView {
    white-space:nowrap;
}

到了这里，关于微信小程序 scroll-view设置scroll-x无法横向显示和滑动的解决方案的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：

领支付宝红包赞助服务器费用

【微信小程序】scroll-view滚动

wxml文件 wxss文件 wxml文件 wxss文件注意事项： 1、在scroll-view标签上加上样式属性： display:flex; white-space:nowrap； 2、scroll-view标签下的一级栏目标签需要加上样式属性： display: inline-block; 只有结合上面两步，才能实现横向滚动。

2024年02月13日
浏览(57)
【微信小程序】scroll-view的基本使用

| scss里面的 .item:nth-child(1) index.wxml index.scss

2024年02月07日
浏览(48)
微信小程序scroll-view去掉滚动条

微信小程序scroll-view去掉滚动条微信官方文档上面给出了显示和隐藏滚动条的属性 show-scrollbar ，把该属性设置为false，文档要求使用该属性要开启 enhanced 属性，把这个属性设置为true即可；通过CSS设置滚动条隐藏：值得注意的是： ::-webkit-scrollbar前要有 scroll-view 的标签名或

2024年02月11日
浏览(64)
微信小程序触底加载scroll-view

需求：有个固定高度的容器，实现容器里面的内容触底加载 1、内容盒子的高度 2、盒子里内容的总高度 3、滚动条的scrollTop 触底加载的原理就是当里面的容器触底的时候进行分页，请求接口合并数据公式盒子的高度+滚动条的scrollTop = 内容高度使用原生的计算方法比较麻烦

2024年02月09日
浏览(46)
微信小程序 scroll-view组件的基本使用

scroll-view 组件其实和view组件很像，结合上节课的内容我们接着尝试教大家一下这个组件怎么使用，现实中这个组件能实现的效果又有那些上图是CSDN的一个私聊窗口界面，我么看图就能想象的到，左边的聊天对像窗口是不是可以滚动的，这时候小程序就可以通过scroll-vie

2024年02月01日
浏览(64)
微信小程序--开发横向滚动条scroll-view

一、话不多说，上代码 .wxml文件写法 css样式 js写法二、解析 scroll-x=\\\"true\\\"：表明是横向滚动 class=\\\"{{currentTab==index?\\\'scroll_item\\\':\\\'\\\'}}\\\"：当点击时才会变色，其中currentTab的初始值是0，通过点击事件更改值

2024年02月12日
浏览(57)
微信小程序scroll-view的scroll-into-view无效问题解决办法

微信小程序的scroll-view组件中，scroll-into-view属性可以指定滚动到指定id的位置。但有时候，该属性可能会出现无效的情况。下面是几种可能的原因和解决办法： 1.scroll-into-view属性指定的id不存在或不可见如果scroll-into-view属性指定的id在页面中不存在，或者该id所在的区域不可

2024年02月02日
浏览(64)
Scroll-view的用法（网页和微信小程序）

微信小程序： 1. 在wxml文件中，使用scroll-view标签包裹需要滚动的内容。例如，下面的代码将一个view组件包裹在scroll-view中： 2. 设置scroll-view的高度和宽度，以及滚动方向，可以通过设置属性来控制，如scroll-x和scroll-y。 scroll-x和scroll-y分别用于控制scroll-view的横向滚动和纵向滚

2024年02月03日
浏览(45)
微信小程序 scroll-view 实现自动滑动到底部

要实现实时聊天功能的话，那么每次有新的消息进来之后，要自动的滚动到底部。 scroll-view 有一个属性 scroll-into-view ：把新进来的消息， push 添加到消息列表 messageList 中。但页面不会自动往下滚动。 1、在 scrill-view 节点最下面加一个垫片节点。需要说明的是：这里的 3 个

2024年02月10日
浏览(60)
微信小程序实现锚点效果 scroll-view的scroll-into-view属性

小程序中实现锚点效果，可以直接使用scroll-view的scroll-into-view属性就可以实现锚点效果，比较方便简单。那么需要用到scroll-view那些参数呢，下面具体讲讲： scroll-x | scroll-y：设置滚动刚想 scroll-into-view：子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动

2024年02月13日
浏览(40)