1. 程式人生 > >小程式 - wx.pageScrollTo安卓手機上滾動異常

小程式 - wx.pageScrollTo安卓手機上滾動異常

官方文件 wx.pageScrollTo(Object object)

該效果在微信開發者工具的模擬器,蘋果手機上都正常滾動;但是在安卓手機上看不到正常的滾動效果,我見到過的bug有

  1. 從當前位置,滾動到最頂部,再滾動到指定位置
  2. 滾動到指定距離的偏差大

如果只達到指定距離,而忽略滾動效果,可以在安卓手機上避免這樣的bug出現,只需要把duration設定為0(直接跳到指定位置)

程式碼如下:

wx.pageScrollTo({
  scrollTop: 100,
  duration: 0
})

也可以針對安卓、蘋果做不同的處理(僅蘋果出現滾動效果)。此時需要獲取使用者裝置資訊,官方文件 

wx.getSystemInfo(Object object),主要使用到system屬性

封裝公共程式碼:

systemType () {
  let systemType = ''

  wx.getSystemInfo({
    success: (res) => {
      let system = res.system

      if (system.indexOf('iOS') >= 0) {
        systemType = 'iOS'
      }
      else {
        systemType = 'Android'
      }
    }
  })
  return systemType
}

在涉及滾動操作的地方執行以下程式碼:

let systemType = this.systemType()

if (systemType === 'iOS') {
  wx.pageScrollTo({
    scrollTop: this.data.recommend_talk_top
  })
}
else {
  wx.pageScrollTo({
    scrollTop: this.data.recommend_talk_top,
    duration: 0
  })
}