【微信小程序点击滚动页面到指定位置】-Toy模板网

这篇具有很好参考价值的文章主要介绍了【微信小程序点击滚动页面到指定位置】。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

【微信小程序点击滚动页面到指定位置】

微信小程序滚动到指定位置,微信小程序,小程序
scroll-view：https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html

  <scroll-view style="height:100%" scroll-y="true" scroll-into-view="{{toView}}" bindtap="pageScroll" scroll-with-animation> 
            <view id='YPGZQ'> 1</view>
            <view id='CSMLQ'>2</view>
            <view id='BOSS'>3</view> 
        </scroll-view>
        
    <view class="btnBox" id="tab-con">
        <view class="btn-share" catchtap="ypgzq">ypgzq</view>
        <view class="fenge"></view>
        <view class="btn-share" catchtap="csmlq">csmlq</view>
        <view class="fenge"></view>
        <view class="btn-share" catchtap="boss">boss</view>
    </view>


    /**
     * 页面的初始数据
     */
    data: { 
        toView: '', //动态设置需要滚动的目的id
    },
    // ypgzq
    ypgzq() {
        // console.log('ypgzq');
        this.setData({
            toView: 'YPGZQ'
        })
    },
    // csmlq
    csmlq() {
        // console.log('csmlq');
        this.setData({
            toView: 'CSMLQ'
        })

    },
    // boss
    boss() {
        // console.log('boss');
        this.setData({
            toView: 'BOSS'
        })

    },

补充：

1： scroll-view设置高度：style=“height:100%”
2： scroll-view设置纵向滚动：scroll-y=“true”
3： scroll-view设置要去的id(这个必须动态设置才生效)：scroll-into-view=“{{toView}}”文章来源地址https://www.toymoban.com/news/detail-701827.html

到了这里，关于【微信小程序点击滚动页面到指定位置】的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！