wx.previewImage触发了scroll-view的scrollTop

QzhouZ commented 5 years ago

问题复现步骤:

scroll-view组件设置scrollTop后，比如200，滚动到有图片的地方，点击预览，关闭预览，又滚到了200位置，预期应该是在图片的位置 用原生的写法，并没有这个问题

屏幕截图和动态 GIF 图

ddq8xvftmz

代码案例

<template>
  <scroll-view class="consult-im--body" :scroll-top="scrollTop" scroll-y>
    <view>1</view>
    <view>1</view>
    <view>1</view>
    <view>1</view>
    <view>1</view>
    <view>1</view>
    <view>1</view>
    <view>1</view>
    <view>1</view>
    <view>1</view>
    <view>1</view>
    <view>1</view>
    <view>1</view>
    <view>1</view>
    <view>1</view>
    <view>1</view>
    <view>1</view>
    <view>1</view>
    <view>1</view>
    <view>1</view>
    <view>1</view>
    <image src="https://wx.qlogo.cn/mmhead/XhAibDCJaWjMd3oA76246zGLGP1s8gU72ukficxAmbgLk/64" @tap="tap" />
    <view>1</view>
    <view>1</view>
    <view>1</view>
    <view>1</view>
    <view>1</view>
    <view>1</view>
    <view>1</view>
    <view>1</view>
    <view>1</view>
    <view>1</view>
    <view>1</view>
</scroll-view>
</template>

<script>

export default {
  name: 'conuslt-im',
  data () {
    return {
      scrollTop: 200
    }
  },
  methods: {
    tap () {
      wx.previewImage({
        urls: ['https://wx.qlogo.cn/mmhead/XhAibDCJaWjMd3oA76246zGLGP1s8gU72ukficxAmbgLk/64'],
        current: 'https://wx.qlogo.cn/mmhead/XhAibDCJaWjMd3oA76246zGLGP1s8gU72ukficxAmbgLk/64'
      })
    }
  }
}
</script>

<style lang="less">
  .consult-im--body {
    height: 300px;
  }
</style>

Alexixyc commented 5 years ago

我也遇到了，只能监听scroll记录一下点击图片时候的scrollTop值，再在success里手动设一下。

<scroll-view class="consult-im--body"
    @scroll="scroll"
    :scroll-top="scrollTop"
    scroll-y>
<script>

......

export default {
    name: 'conuslt-im',
    data() {
        return {
            scrollTop: 200
        }
    },
    methods: {
        scroll(e) {
            this.scrollTop = e.mp.detail.scrollTop
        },
        tap() {
            let oldScrollTop = this.scrollTop
            wx.previewImage({
                urls: ['https://wx.qlogo.cn/mmhead/XhAibDCJaWjMd3oA76246zGLGP1s8gU72ukficxAmbgLk/64'],
                current: 'https://wx.qlogo.cn/mmhead/XhAibDCJaWjMd3oA76246zGLGP1s8gU72ukficxAmbgLk/64',
                success: () => {
                    this.scrollTop = oldScrollTop
                }
            })
        }
    }
}
</script>

QzhouZ commented 5 years ago

@Alexixyc 谢谢你的方案希望官方能出来解释一下，这产生的原因，以及后续是否有解决计划

QzhouZ commented 5 years ago

我发现数据更新也会触发scroll-view的scrollTop现象

dxwb commented 5 years ago

previewImage也会触发scroll-into-view的滚动，请问有相应的解决方案吗

dxwb commented 5 years ago

previewImage也会触发scroll-into-view的滚动，请问有相应的解决方案吗

好吧，我试了一下，在previewImage之前把scroll-into-view设置成一个空字符串就行了

qiyian commented 4 years ago

我发现数据更新也会触发scroll-view的scrollTop现象

请问怎么解决的，我也遇到了

Meituan-Dianping / mpvue