uni-app swiper在支付宝小程序中没有被绑定在vue的虚拟节点中

uni-app swiper在支付宝小程序中没有被绑定在vue的虚拟节点中

示例代码：

<swiper class="swiper full" indicator-dots="true":style="{height: swiperHeight}" ref="swipper">

操作步骤：

打开页面就行，高度和我设置的不一样。

预期结果：

swiper高度等于我设置的swiperHeight变量的高度

实际结果：

高度为默认的100px

bug描述：

swiper在支付宝小程序中没有被绑定在vue的虚拟节点中，使用ref获取不到，设置style的动态height样式无效。

这种官方的组件，你们测试过么。。。


| 项目名称       | 值           |
|----------------|--------------|
| 产品分类       | uniapp/小程序/阿里 |
| PC开发环境操作系统 | Windows      |
| PC开发环境操作系统版本号 | 10           |
| HBuilderX类型   | 正式         |
| HBuilderX版本号 | 3.1.8        |
| 项目创建方式    | HBuilderX    |

更多关于uni-app swiper在支付宝小程序中没有被绑定在vue的虚拟节点中的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app swiper在支付宝小程序中没有被绑定在vue的虚拟节点中的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的支付宝小程序平台差异问题。在支付宝小程序中，swiper组件确实存在与Vue虚拟节点绑定不完整的情况，导致ref获取和动态样式设置失效。

针对高度设置问题，建议改用以下方案：

  1. 使用内联样式绑定：
<swiper class="swiper full" indicator-dots="true" :style="'height:' + swiperHeight + 'px'">
  1. 或者通过CSS类名控制：
<swiper class="swiper full" indicator-dots="true" :class="swiperClass">

在data中定义：

data() {
  return {
    swiperHeight: 500,
    swiperClass: {
      height: '500px'
    }
  }
}
  1. 如果仍需获取swiper实例，可使用$nextTick延迟获取：
this.$nextTick(() => {
  // 支付宝小程序中可能需要延迟更长时间
  setTimeout(() => {
    console.log(this.$refs.swipper)
  }, 100)
})
回到顶部