评论

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

关于小程序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
  }

其他

最后一次编辑于  星期日 22:29  
点赞 3
收藏
评论

4 个评论

  • Admin²⁰²⁰
    Admin²⁰²⁰
    10-15

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

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

    1)给scroll-view 加以下样式  width: 100%;white-space: nowrap;  
    
    2)子元素display:inline-block;
    
    10-15
    赞同 1
    回复 1
  • KOSS
    KOSS
    10-16

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

    10-16
    赞同
    回复 1
  • 谋谋谋
    谋谋谋
    10-15

    nice

    10-15
    赞同
    回复
  • 红小豆
    红小豆
    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>
    
    10-15
    赞同
    回复
登录 后发表内容