小程序实现h5锚点效果

小程序实现锚点效果最简单的方法就是通过scroll-view的scroll-into-view属性来实现。

<view class="scrollWrap">
    <scroll-view scroll-y :scroll-with-animation="true" :style="{ height: scrollHeight+'px' }" :scroll-into-view="toView">

         <view class="case_item" :id="'item'+index" v-for="(item,index) in caseList" :key="index"></view>
    </scroll-view>
</view>

注意：

1.纵向滚动时scroll-view必须设置height；

2.设置scroll-with-animation为true;

3.如果scroll-view的内容是通过请求后渲染的，scroll-into-view在请求成功回调中设置

     this.$request.httpRequest({
        path,
        data,
        method: 'POST',
        succ: (res) => {
            this.caseList = res.data.data
            this.$nextTick(()=>{
                this.toView = 'item'+this.params.current
            })
        }
    })