zoukankan      html  css  js  c++  java
  • 微信小程序,scroll-view组件的使用,跳转到指定的锚点/定位跳转

    scroll-view 属性设置:

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

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

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

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

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

     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
            })
        },
    })     
    复制代码
    1、路在何方? 路在脚下 2、何去何从? 每个人都在探索,未来的方向在何处。如果说某些方向是世人已经公认的,那么就先按照公认的去走吧(ps:站在巨人的肩膀上看世界会清晰)。 如果说方向,当今世人还不清晰准确。那么就大胆往前走吧,对与错并不重要。心中的方向更加重要。
  • 相关阅读:
    20165204 缓冲区溢出漏洞实验
    2019-2020 1 20175230 实验四 外设驱动程序设计
    2019-2020-1 20175230 实验三 并发程序
    2019-2020-1 20175208 20175218 20175230 实验二 固件程序设计
    2019-2020-1 20175208 20175218 20175230 实验一 开发环境的熟悉
    2018-2019-2 20175230 实验五《网络编程与安全》实验报告
    2018-2019-2 20175230实验四 《Android开发基础》实验报告
    2018-2019 2 20175230《Java程序设计》第十一周学习总结
    2018-2019-2 20175230 实验三《Java面向对象程序设计》实验报告
    MyCP
  • 原文地址:https://www.cnblogs.com/yuanjili666/p/13684231.html
Copyright © 2011-2022 走看看