小程序scoll-view锚点定位

小程序scoll-view锚点定位：

<view class='flex content section'>
// 左边栏布局
    <view class='left'>
        <view catchtap='anchor' data-opt='zhichangUp' class="item {{ toTab=='zhichangUp'?'active':'' }}">
            <text class='iconfont iconxuexi'></text>
            <text>职场提升</text>
        </view>
        <view catchtap='anchor' data-opt='code' class="item {{ toTab=='code'?'active':'' }}">
            <text class='iconfont iconjianzhu'></text>
            <text>编程与开发</text>
        </view>
        <view catchtap='anchor' data-opt='data' class="item {{ toTab=='data'?'active':'' }}">
            <text class='iconfont iconxinshuai'></text>
            <text>数据科学</text>
        </view>
        <view catchtap='anchor' data-opt='product' class="item {{ toTab=='product'?'active':'' }}">
            <text class='iconfont iconyunying'></text>
            <text>产品运营</text>
        </view>
        <view catchtap='anchor' data-opt='design' class="item {{ toTab=='design'?'active':'' }}">
            <text class='iconfont iconyunying'></text>
            <text>设计创意</text>
        </view>
        <view catchtap='anchor' data-opt='commerce' class="item {{ toTab=='commerce'?'active':'' }}">
            <text class='iconfont iconyunying'></text>
            <text>电商运营</text>
        </view>
        <view catchtap='anchor' data-opt='language' class="item {{ toTab=='language'?'active':'' }}">
            <text class='iconfont iconyunying'></text>
            <text>语言学习</text>
        </view>
    </view>

// 右边栏布局
    <view class='right flex_1'>
        <!-- scroll-into-view锚点定位 -->
        // scroll-into-view 绑定定位id(id与上面按钮的id一致)
        <scroll-view scroll-into-view="{{ toTab }}" scroll-y="true" scroll-with-animation="true" class='scroll'>
            <view class='item_title bottom_link' id='zhichangUp'>职场提升</view>
            <view class='items flex_c'>
                <view class='item'>考试认证</view>
                <view class='item'>编程语言</view>
                <view class='item'>系统运维</view>
                <view class='item'>web开发</view>
                <view class='item'>其他</view>
                <view class='item'>考试认证</view>
                <view class='item'>编程语言</view>
                <view class='item'>系统运维</view>
                <view class='item'>web开发</view>
                <view class='item'>其他</view>
            </view>

            <view class='item_title bottom_link' id='code'>编程与开发</view>
            <view class='items flex_c'>
                <view class='item'>考试认证</view>
                <view class='item'>编程语言</view>
                <view class='item'>系统运维</view>
                <view class='item'>web开发</view>
                <view class='item'>其他</view>
                <view class='item'>考试认证</view>
                <view class='item'>编程语言</view>
                <view class='item'>系统运维</view>
                <view class='item'>web开发</view>
                <view class='item'>其他</view>
            </view>

            <view class='item_title bottom_link' id='data'>数据科学</view>
            <view class='items flex_c'>
                <view class='item'>考试认证</view>
                <view class='item'>编程语言</view>
                <view class='item'>系统运维</view>
                <view class='item'>web开发</view>
                <view class='item'>其他</view>
                <view class='item'>考试认证</view>
                <view class='item'>编程语言</view>
                <view class='item'>系统运维</view>
                <view class='item'>web开发</view>
                <view class='item'>其他</view>
            </view>

            <view class='item_title bottom_link' id='product'>产品运营</view>
            <view class='items flex_c'>
                <view class='item'>考试认证</view>
                <view class='item'>编程语言</view>
                <view class='item'>系统运维</view>
                <view class='item'>web开发</view>
                <view class='item'>其他</view>
                <view class='item'>考试认证</view>
                <view class='item'>编程语言</view>
                <view class='item'>系统运维</view>
                <view class='item'>web开发</view>
                <view class='item'>其他</view>
            </view>

            <view class='item_title bottom_link' id='design'>设计创意</view>
            <view class='items flex_c'>
                <view class='item'>考试认证</view>
                <view class='item'>编程语言</view>
                <view class='item'>系统运维</view>
                <view class='item'>web开发</view>
                <view class='item'>其他</view>
                <view class='item'>考试认证</view>
                <view class='item'>编程语言</view>
                <view class='item'>系统运维</view>
                <view class='item'>web开发</view>
                <view class='item'>其他</view>
            </view>

            <view class='item_title bottom_link' id='commerce'>电商运营</view>
            <view class='items flex_c'>
                <view class='item'>考试认证</view>
                <view class='item'>编程语言</view>
                <view class='item'>系统运维</view>
                <view class='item'>web开发</view>
                <view class='item'>其他</view>
                <view class='item'>考试认证</view>
                <view class='item'>编程语言</view>
                <view class='item'>系统运维</view>
                <view class='item'>web开发</view>
                <view class='item'>其他</view>
            </view>

            <view class='item_title bottom_link' id='language'>语言学习</view>
            <view class='items flex_c'>
                <view class='item'>考试认证</view>
                <view class='item'>编程语言</view>
                <view class='item'>系统运维</view>
                <view class='item'>web开发</view>
                <view class='item'>其他</view>
                <view class='item'>考试认证</view>
                <view class='item'>编程语言</view>
                <view class='item'>系统运维</view>
                <view class='item'>web开发</view>
                <view class='item'>其他</view>
            </view>
        </scroll-view>
    </view>
</view>

scroll-into-view="{{ toTab }}" scroll-y=“true” scroll-with-animation=“true”
scroll-into-view ：绑定元素定位id(id与上面按钮的id一致)
scroll-y：滚动方向
scroll-with-animation：滚动动画

	data: {
        toTab: 'zhichangUp'
    },
    anchor: function (options) {
        var tab = options.currentTarget.dataset.opt
        var that = this
        that.setData({
            toTab: tab
        })
    },

js代码，添加tab切换事件，将当前opt(id)值赋值给toTab，触发事件便可实现锚点定位

/* pages/src/page/pxClass.wxss */
page {
    height: 100%;
}
.content {
    align-items: flex-start;
    position: relative;
    height: 100%;
}

.content .left {
    position: relative;
    top: 0;
    bottom: 0;
    height: 100%;
    width: 210rpx;
    font-size: 24rpx;
    color: #999;
    border-right: 2rpx solid #f0f0f0;
}

.content .left .item {
    padding: 20rpx;
    padding-right: 0;
}

.content .left .item.active {
    background-color: #5283db;
    color: #fff;
}

.content .left .item .iconfont {
    font-size: 38rpx;
    margin-right: 8rpx;
}
.content .left .item .iconfont.iconxinshuai {
    font-size: 32rpx;
}

.content .right {
    position: absolute;
    left: 210rpx;
    top: 0;
    right: 0;
    bottom: 0;
    padding-left: 20rpx;
    flex-wrap: wrap;
    font-size: 26rpx;
    color: #4a4a4a;
    overflow: scroll;
}

.content .right .item_title {
    font-size: 32rpx;
    font-weight: bold;
    padding: 40rpx 0;
}

.content .right .items {
    padding: 36rpx 36rpx 0 0;
    flex-wrap: wrap;
}

.content .right .items .item {
    line-height: 28rpx;
    box-sizing: border-box;
    padding: 18rpx 20rpx;
    background-color: #ececec;
    margin: 0 20rpx 20rpx 0;
    border-radius: 4rpx;
    width: 142rpx;
    text-align: center;
}

.scroll {
    height: 100%;
}

css代码，记得将scoll-view的高设为100%，否则锚点定位不生效
官网连接：https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html