NervJS / taro

开放式跨端跨框架解决方案,支持使用 React/Vue/Nerv 等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5/React Native 等应用。 https://taro.zone/
https://docs.taro.zone/
Other
35.34k stars 4.77k forks source link

swiper 组件 h5 页面下 样式不停刷新 且默认跳转到最后一个 #12412

Closed gowago closed 1 year ago

gowago commented 2 years ago

相关平台

H5

浏览器版本: chrome latest 使用框架: Vue 3

复现步骤

   <swiper
      v-if="product.list"
      class="order-swiper bg-F8F8FA w-full h-137 box-border pt-15"
      :circular="true"
      :indicator-dots="false"
      :autoplay="false"
      previous-margin="16px"
      next-margin="16px"
      :snap-to-edge="true"
      @change="changeProduct"
    >
      <swiper-item v-for="item in product.list" :key="item.id">
        <view
          class="mx-4 h-full bg-5079FD rounded-12"
          :style="getMask($changeUrl(item.image2, { prefix: '/wparesource/public', token: false }))"
        ></view>
      </swiper-item>
    </swiper>

期望结果

h5环境下 默认展示第一个卡片

实际结果

h5环境下会滑动最后一个卡片

环境信息

  Taro CLI 3.4.13 environment info:
    System:
      OS: Windows 10
    Binaries:
      Node: 16.15.0 - D:\Program Files\nodejs\node.EXE
      Yarn: 1.22.17 - C:\Users\Administrator\AppData\Roaming\npm\yarn.CMD
      npm: 8.5.5 - D:\Program Files\nodejs\npm.CMD
ZakaryCode commented 1 year ago

fix in https://github.com/NervJS/taro/commit/6291beb0e611f5ddc91a7300d1180f8afda097ce