关于小程序scroll-view横向滑动问题
发布于 4 年前 作者 xiulanxiong 3674 次浏览 来自 分享

在微信小程序实现横向滑动时，使用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
  }

其他

4 回复

又是小肥羊的小号？每天整那么些东西似乎很好玩哦，这是第几个小号了？

感谢分享，特别还带代码片段的分享。

下面两点新手比较容易忽略。但是这个也是关键的样式。

1）给scroll-view 加以下样式  width: 100%;white-space: nowrap;  

2）子元素display：inline-block；

nice

wxml文件代码如下所示

<scroll-view
  scroll-x="{{true}}" style=" width:100%;height: 100px;"
  refresher-enabled="{{true}}"
  refresher-threshold="{{100}}"
  refresher-default-style="white"
  refresher-background="lightgreen"
  refresher-triggered="{{triggered}}"
  bindrefresherpulling="onPulling"
  bindrefresherrefresh="onRefresh"
  bindrefresherrestore="onRestore"
  bindrefresherabort="onAbort"
>
<view class="scroll-box" style="white-space:nowrap;heigth:110rpx; ">
  <view class="box" wx:for="{{arr}}" style="border:1px solid #f00;display:inline-block;height: 100rpx;width:100rpx;">
  {{item}}
  </view>
</view>
</scroll-view>
回到顶部