Question

我正在寻找一种从autosize.js（旧版本）更新swiper.js的方法。

更详细：

我在swiper中有一个autosize textarea。滑块设置为自动高度。这意味着textarea位于设置为overflow:hidden的滑动滑块内。现在，当textarea正在改变高度时，幻灯片高度不会改变，并且由于我内容的overflow:hidden部分被切断了。

要解决此问题，我想在更改textarea的高度时更新de slide height。

在autosize.js插件中有一个部分（来自第178行），其中设置了高度：

 if (original !== height) {
     ta.style.height = height + 'px';
     if (callback) {
         options.callback.call(ta,ta);
     }

     /* send trigger to update slide here */
 }

当这部分发生时，我想在插件外发送一个触发器来更新swiper幻灯片。我有一个功能（没什么特别的）。

function updateSwiper(){
    mySwiper.update();
}

插件和自定义功能（上图）都在同一个文件中。

所以现在我想知道，我该如何解决这个问题呢？提前谢谢。

Answer 1

在所有评论中，我的研究结果发现我使用的是旧版本的autosize.js。新版本有一个触发器，用于更改textarea的高度。可以在本文档中阅读：Autosize Documentation

要在jQuery中解决这个问题，你可以使用这段代码：

$('textarea').each(function(){
  autosize(this);
}).on('autosize:resized', function(){
  console.log('textarea height updated');
});

此代码首先将自动调整大小设置为textarea并使用on('autosize.resized')来跟踪高度是否已更改。

将此代码更新为我的版本：

 $('textarea').each(function(){
   autosize(this);
 }).on('autosize:resized', function(){
   updateSwiper();
 });

解决了我的问题，谢谢大家。

从autosize.js调用函数来更新swiper.js

1 个答案: