滚动视图 <scroll-view>

简介 Introduction

容器组件
子项尺寸超过容器后，可以上下或左右滚动
未显示的子项被隐藏
不支持嵌套 textarea、map、canvas、video 组件
更多信息，请访问 <scroll-view>

通用属性
item	desc
scroll-x	允许横向滚动；最好也显式指定宽度；谨慎使用 % 宽度
scroll-y	允许纵向滚动；应显式指定高度
scroll-into-view	滚动到值为 id 的某子元素；id 不能以数字开头
scroll-with-animation	使用动画过渡
scroll-top	设置竖向滚动条位置
bindscroll	滚动时触发

WebView 特有属性
item	desc
enable-flex	布尔；默认false 水平方向启用 flexbox 布局，使之成为 flex 容器！！！
using-sticky	布尔；默认false 启用 position: sticky 特性

这个属性好像不指定也可以！！！

enable-flex 为了兼容早期的布局方式，使用需要注意的事项很多，建议直接使用 flex，见后续案例

Skyline 特有属性
item	desc
type	渲染模式 list：列表模式；默认 custom：自定义模式；子组件是sticky-section、list-view或grid-view nested：嵌套模式
using-sticky	布尔；默认false；启用 position: sticky 特性

[] 水平滚动 - 导航/推荐/活动

1. 推荐方案

在容器和子项之间增加一个 view 作为间接容器，view 使用弹性盒子 flex
默认情况下，flex 会压缩子项；为了撑开，子项设置不缩放：flex-shrink: 0;

<scroll-view scroll-x class="wrap">
    <view class="inner-wrap">
        <view class="item">item1</view>
        ...
        <view class="item">item10</view>
    </view>
</scroll-view>

.inner-wrap{
    display: flex;
    gap: 40rpx;
}

.item{
    width: 100rpx;
    height: 100rpx;
    flex-shrink: 0;
}

其它样式

2. 小程序方案

启用 enable-flex 属性，设置不换行

<scroll-view scroll-x  enable-flex class="wrap">
    <view class="item">item1</view>
    ...
    <view class="item">item10</view>
</scroll-view>

.wrap{
  white-space: nowrap;
}

各子项设置行内块

.item{
  display: inline-block;
}

其它设置：容器高度或子项高度；子项间隔；有时候还需要处理第一个和最后一个子项的间隔

[] 垂直滚动 - 查看城市信息/商品列表

必须显式的指定高度 - px、rpx、%

页面结构

- 滑动视图：内部是若干标题城市首字母和城市图像或名称列表

- 版权信息

<scroll-view scroll-y using-sticky class="sc"></scroll-view>

样式 Style

- 版权信息高度100rpx

- 滑动视图高度由 calc 计算得出；且标题粘性定位在滑动视图顶端

如果不限高，不使用 scroll-view 也可以

[] 联动导航 -水平

滚动视图 scroll-view 和轮播 swiper 配合使用
单击滚动导航项，轮播跳转到指定项
拖动改变轮播时，滚动导航项也相应改变；且当前导航项样式高亮
滚动导航项使用自定义属性 data- 获取各项的索引
轮播使用改变时间获取当前 current
navs 和 swipers 数据

<scroll-view scroll-x scroll-with-animation scroll-into-view="nav{{curIndex}}">
    <view class="nav flex">
        <view class="item {{index==curIndex?'active':''}}" 
          wx:for="{{navs}}" wx:key="index" 
          data-ind="{{index}}" 
          id="nav{{index}}" 
          bind:tap="selectItem">
          {{item.title}}
        </view>
    </view>
</scroll-view>
<swiper current="{{curIndex}}" bindchange="changeItem" circular>
    <swiper-item class="swiper-item" wx:for="{{swipers}}" wx:key="index">
      {{item}}
    </swiper-item>
</swiper>

selectItem(e:any) {
    this.setData({
        curIndex: e.target.dataset.ind
    })
},
changeItem(e:any){
    this.setData({
        curIndex: e.detail.current
    })
}

改进方案：使用双向绑定实现 - 简直不要太爽，详情请参考双向绑定