评论

关于小程序scroll-view横向滑动问题

2020-10-15
14840浏览
4评论

关于小程序scroll-view相关问题

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

其他

最后一次编辑于  2020-10-18  
点赞 4
收藏
评论

4 个评论

  • Admin ²º²⁵
    Admin ²º²⁵
    2020-10-15

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

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

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

2）子元素display：inline-block；
    2020-10-15
    赞同 2
    回复 3
    • 红小豆
      红小豆
      2020-10-15
      老铁来了
      2020-10-15
      赞
      回复
    • 擎天柱
      擎天柱
      2022-11-21
      请问子元素display已经设置了状态flex，该怎么办呢？谢谢您，打扰了🌹
      2022-11-21
      赞
      回复
    • 丘丘萝卜
      丘丘萝卜
      2024-04-16回复擎天柱
      外面套一层 view
      2024-04-16
      赞
      回复
  • 答题小程序
    答题小程序
    2020-10-16

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

    2020-10-16
    赞同
    回复 1
    • 红小豆
      红小豆
      2020-10-16
      没错，就是我
      2020-10-16
      赞
      回复
  • 谋谋谋
    谋谋谋
    2020-10-15

    nice

    2020-10-15
    赞同
    回复
  • 红小豆
    红小豆
    2020-10-15

    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>
    2020-10-15
    赞同
    回复
请 登录 后发表内容
作者介绍

文章标签
关于小程序scroll-view相关问题