• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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

 

index.wxml 页面创建跳转按钮 

<!-- index.wxml -->

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

 

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 

<!-- detail.wxml -->
<view>
  
    <scroll-view scroll-y="true" style="height: {{height+\'px\'}};" scroll-into-view="{{ detail }}" scroll-with-animation="true"  >
      <view id="detail0" style="height: 500px" > detail0 </view>
      <view id="detail1" style="height: 500px" > detail1 </view>
        <view id="detail2" style="height: 500px" > detail2 </view>
        <view id="detail3" style="height: 500px" > detail3 </view>
</scroll-view> </view>

 

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
        })
    },
})     

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap