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

这篇具有很好参考价值的文章主要介绍了微信小程序实现锚点效果 scroll-view的scroll-into-view属性。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

scroll-x | scroll-y：设置滚动刚想
scroll-into-view：子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素。
scroll-with-animation：设置滚动条位置时使用动画过渡

效果展示：
小程序 scroll-view 拖拽排序,微信小程序,微信小程序

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设置即可。

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

wxss文章来源地址https://www.toymoban.com/news/detail-641148.html

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;
}