taro scroll-view / scroll-into-view (vue版本无效)

t0ybt7op  于 2022-10-27  发布在  其他
关注(0)|答案(2)|浏览(267)

相关平台

微信小程序

小程序基础库: 8.0.28
使用框架: Vue 2

复现步骤

<scroll-view scroll-y="true"
                style="height: 300rpx;"
                scroll-into-view="demo2">
     <view id="demo1"
           class="scroll-view-item demo-text-1"></view>
     <view id="demo2"
           class="scroll-view-item demo-text-2"></view>
     <view id="demo3"
           class="scroll-view-item demo-text-3"></view>
   </scroll-view>
</template>

<style  lang="scss">
.scroll-view-item{
 height: 300rpx;
}
.demo-text-1{
 position: relative;
 align-items: center;
 justify-content: center;
 background-color: #1AAD19;
 color: #FFFFFF;
 font-size: 36rpx;
}
.demo-text-1:before{
 content: 'A';
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
}
.demo-text-2{
 position: relative;
 align-items: center;
 justify-content: center;
 background-color: #2782D7;
 color: #FFFFFF;
 font-size: 36rpx;
}
.demo-text-2:before{
 content: 'B';
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
}
.demo-text-3{
 position: relative;
 align-items: center;
 justify-content: center;
 background-color: #F1F1F1;
 color: #353535;
 font-size: 36rpx;
}
.demo-text-3:before{
 content: 'C';
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
}
</style>

期望结果

期望y轴滚动到id为demo2的位置

实际结果

没有效果,此代码在原生微信小程序可以滚动至指定位置

环境信息

Taro CLI 3.5.5 environment info:
    System:
      OS: Windows 10
    Binaries:
      Node: 14.17.0 - C:\Program Files\nodejs\node.EXE
      Yarn: 1.22.5 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
      npm: 6.14.13 - C:\Program Files\nodejs\npm.CMD

补充信息

3.5.5 / 3.5.6 都无法正常使用

rjee0c15

rjee0c151#

@jshuhao 麻烦提供一下完整的 demo

41ik7eoe

41ik7eoe2#

@jshuhao 麻烦提供一下完整的 demo

https://github.com/jshuhao/taro-demo.git
此例子采用的是官方demo,预期滚动到demo2的位置,实际没效果

相关问题