微信小程序scroll-view使用解析

项目中遇到了使用滑动视图的组件,于是去微信小程序开发文档看了下关于scroll-view的介绍,不看不知道,看了感觉很郁闷,这文档该更新补充了。。

文档中只是给出了wxml与page.js文件内容但是缺少了最重要的wxss样式文件,本身scroll-view是个什么样的组件也没有提示只是有如下提醒:

Bug & Tip
1.tip: 请勿在 scroll-view 中使用 textarea、map、canvas、video 组件
2.tip: scroll-into-view 的优先级高于 scroll-top
3.tip: 在滚动 scroll-view 时会阻止页面回弹,所以在 scroll-view 中滚动,是无法触发 onPullDownRefresh
4.tip: 若要使用下拉刷新,请使用页面的滚动,而不是 scroll-view ,这样也能通过点击顶部状态栏回到页面顶部

在我看来这些并不是最重要的,最重要的是怎么让开发者看到正确的示例,但是一段代码片段都没给、、

本想着直接给出 scoll-view 几个弹性盒子的样式如下:

{ 
  height: 100px;
  width: 100px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  overflow-x: scroll;
}

然后给它几个item,约束如下:

{
    height: 100%;
    width: 100px;
    background-color: red;
    border: 10px solid white;
    box-sizing: border-box;
    display: block;
    flex-shrink: 0;
}

但是scroll-view 并不能识别display: flex;并且行内元素会换行;

最后试着在scroll-view中嵌套一层view,view中再嵌入子元素,给予合适的约束才算完成;

时间关系,写的比较简略,项目结束后再补充;

本站所有文章除特殊声明外均为原创,未经允许禁止转载!
换个声音
停止播放