阅读 27

微信小程序 - 实现页面跳转,跳转到指定锚点位置

实现页面跳转,跳转到指定锚点位置

 

index.wxml 页面创建跳转按钮 



class="btn"  bindtap="jump" data-detail="detail0" > 跳到 detail0 锚点位置 
class="btn"  bindtap="jump" data-detail="detail1" > 跳到 detail1 锚点位置
class="btn"  bindtap="jump" data-detail="detail2" > 跳到 detail2 锚点位置 
class="btn"  bindtap="jump" data-detail="detail3" > 跳到 detail3 锚点位置 

 

index.js

// index.js
Page({
    data: {},
    // 跳详情页
    jump (event) {
        // 获取到跳转锚点id
        let detail = event.currentTarget.dataset.detail;

        wx:wx.navigateTo({
          url: ‘/pages/index/detail?detail=‘ + detail,  // 通过url传到跳转页面
        })
    },
})

 

detail.wxml 转的页面

使用 scroll-view 



  
    
       detail0 
       detail1 
         detail2 
         detail3 

 

scroll-view 属性设置:

scroll-y="true" 允许Y轴滚动;

scroll-into-view="{{ detail }}值应为某子元素id(id不能以数字开头)。设置哪个方向可滚动,则在哪个方向滚动到该元素;

scroll-with-animation="true在设置滚动条位置时使用动画过渡

注意: scroll-view 一定要设置 height: 的值 (px / rpx),否则无效

 

detail.js

Page({

    data : {
        detail: ‘detail0‘, // 锚点id
        height: 0,  // 屏幕的高度
    },
    
    onLoad(options) {
        var that = this;
        console.log(options.detail);
        this.setData({
            height: wx.getSystemInfoSync().windowHeight, // 获取屏幕高度
            detail: options.detail  // 获取跳转过来的锚点id
        })
    },
})     

 

原文:https://www.cnblogs.com/sanyekui/p/12793146.html

文章分类
代码人生
版权声明:本站是系统测试站点,无实际运营。本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 XXXXXXo@163.com 举报,一经查实,本站将立刻删除。
相关推荐