nvue.js 1.2 KB

12345678910111213141516171819202122232425262728
  1. // 引入bindingx,此库类似于微信小程序wxs,目的是让js运行在视图层,减少视图层和逻辑层的通信折损
  2. const BindingX = uni.requireNativePlugin('bindingx')
  3. export default {
  4. methods: {
  5. // 此处不写注释,请自行体会
  6. nvueScrollHandler(e) {
  7. const anchor = this.$refs['u-scroll-list__scroll-view'].ref
  8. const element = this.$refs['u-scroll-list__indicator__line__bar'].ref
  9. const scrollLeft = e.contentOffset.x
  10. const contentSize = e.contentSize.width
  11. const { scrollWidth } = this
  12. const barAllMoveWidth = this.indicatorWidth - this.indicatorBarWidth
  13. // 在安卓和iOS上,需要除的倍数不一样,iOS需要除以2
  14. const actionNum = uni.$u.os() === 'ios' ? 2 : 1
  15. const expression = `(x / ${actionNum}) / ${contentSize - scrollWidth} * ${barAllMoveWidth}`
  16. BindingX.bind({
  17. anchor,
  18. eventType: 'scroll',
  19. props: [{
  20. element,
  21. property: 'transform.translateX',
  22. expression
  23. }]
  24. })
  25. }
  26. }
  27. }