微信小程序实现锚点效果 scroll-view的scroll-into-view属性

小程序中实现锚点效果，可以直接使用scroll-view的scroll-into-view属性就可以实现锚点效果，比较方便简单。那么需要用到scroll-view那些参数呢，下面具体讲讲：

• scroll-x | scroll-y：设置滚动刚想

• scroll-into-view：子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素。

• scroll-with-animation：设置滚动条位置时使用动画过渡

效果展示：

wxml

<view class="fixed">
    <block wx:for="{{4}}" wx:key="index">
        <view class="bg{{index}}" data-index="{{index}}" bindtap="getViewId">内容</view>
    </block>
</view>
<scroll-view scroll-y class="scroll" scroll-into-view="{{viewid}}" scroll-with-animation>
    <block wx:for="{{4}}" wx:key="index">
        <view id="cont{{index}}" class="bg{{index}}">内容</view>
    </block>
</scroll-view>

注意：viewid值是动态的，通过setData设置即可。

js

Page({
    data: {
        viewid: ""
    },
    getViewId(e) {
        this.setData({
            viewid: "cont" + e.currentTarget.dataset.index
        })
    }
})

wxss

page {
    font-size: 28rpx;
    text-align: center;
}

.bg0 {
    background: #CCCC99;
}

.bg1 {
    background: #CC9966;
}

.bg2 {
    background: #666666;
}

.bg3 {
    background: #CC9999;
}

.fixed {
    border: 3rpx solid #eee;
    width: 100rpx;
    line-height: 100rpx;
    position: fixed;
    bottom: 10%;
    right: 0;
    z-index: 1;
}

.fixed view {
    width: 100rpx;
}

.scroll {
    height: 100vh;
}

.scroll view {
    width: 100%;
    height: 1000rpx;
}