微信小程序scrollview注意点

最新推荐文章于 2024-08-23 10:43:07 发布

韩zj

最新推荐文章于 2024-08-23 10:43:07 发布

阅读量553

点赞数

分类专栏：小程序文章标签：小程序

本文链接：https://blog.csdn.net/jifashihan/article/details/105794376

版权

小程序专栏收录该内容

10 篇文章 0 订阅

订阅专栏

微信小程序scroll-view，
纵向滑动注意点
必须设置高度，除了全屏幕的scrollview，其他的高度不应该写死，应该动态计算，

let windowHeight = wx.getSystemInfoSync().windowHeight // 屏幕的高度
    let windowWidth = wx.getSystemInfoSync().windowWidth // 屏幕的宽度
    let ratio = 750 / windowWidth;

    this.setData({
      scroll_height: (windowHeight - 100) * ratio
    })

横向滑动注意点
1.scroll-view 中的需要滑动的元素不可以用 float 浮动；
2.scroll-view 中的包裹需要滑动的元素的大盒子用 display:flex; 是没有作用的；
3.scroll-view 中的需要滑动的元素要用 dislay:inline-block; 进行元素的横向编排；
4.包裹 scroll-view 的大盒子有明确的宽和加上样式–> overflow:hidden;white-space:nowrap;

微信小程序scroll-view左右横向滑动