滚动视图

<scroll-view>

说明

容器组件

实现拖拽滚动

子项尺寸超过容器后，可以按照一定方向滚动以显式被隐藏的子项

不支持嵌套textarea、map、canvas、video 组件

滚动条的长度是预估的；若直接子节点的高度差别较大，则滚动条长度可能会不准确

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

WebView 特有属性
属性	说明
enable-flex	布尔；默认false；启用 flexbox 布局，使之成为 flex 容器！！！
using-sticky	布尔；默认false；启用 position: sticky 特性

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

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

方案1：容器不换行 nowrap；子项项调整为 inline-block

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

wxss - 如设置了每个子项的左右margin，通常最后和第一个需要特别处理，消除margin

.wrap{
    white-space: nowrap;
}
.item{
    display: inline-block;
    margin: 0 20rpx;
}

清除margin

.wrap .item:last-child{
    margin-right: 0;
}
.wrap .item:first-child{
    margin-left: 0;
}

方案2：在容器和子项之间增加一个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{
    flex-shrink: 0;
}

方案3：小程序默认方案：为容器增加enable-flex属性启用并使用弹性盒子flex布局

仍然需要单独设置各项的间隔；样式过于分散，不推荐

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

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

页面结构

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

- 版权信息

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

样式

- 版权信息高度100rpx

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

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

联动导航 -水平

滚动视图scroll-view和轮播swiper配合使用

单击滚动导航项，轮播跳转到指定项

拖动改变轮播时，滚动导航项也相应改变；且当前导航项样式高亮

滚动导航项使用自定义属性data-获取各项的索引

轮播使用改变时间获取当前current

<scroll-view scroll-x scroll-into-view="{{curIndex}}">
    <view class="nav">
        <view class="item {{index==curIndex?'active':''}}" wx:for="{{nav}}" wx:key="index" data-ind="{{item}}" bind:tap="selectItem">
        {{item}}
        </view>
    </view>
</scroll-view>
<swiper current="{{curIndex}}" bindchange="changeItem" circular>
    <swiper-item class="swiper-item" wx:for="{{10}}" 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
    })
}

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