1. 程式人生 > 實用技巧 >微信小程式,scroll-view元件的使用,跳轉到指定的錨點/定位跳轉

微信小程式,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
        })
    },
})