照片浏览器中的framework7 rtl prev/next按钮

Question

“照片浏览器上一个，照片浏览器下一个”按钮有问题 它不能正常工作

看看这个

它的 2 of 3 但 prev 按钮被禁用，当我使用这种样式时它可以工作

.photo-browser-swiper-container {
      direction: ltr;
}

但是滑动方向是错误的。

Answer 1

我遇到了同样的问题，我通过这个来解决它：

var yourPhotoObj = app.photoBrowser.create({......});

    /* Fixing F7 Bug in PhotoBroswer Prev Link Image */
    $$(document).on('click', '.photo-browser-prev', function(e){
        fixingF7PrevButtonIssueInRtl(true);
    });

    $$(document).on('click', '.photo-browser-next', function(e){
        fixingF7PrevButtonIssueInRtl();
    });

    function fixingF7PrevButtonIssueInRtl(removeOne = false)
    {
        if(langVarialbeDirection == 'rtl'){// Change langVarialbeDirection to your direction
            if(!yourPhotoObj || !yourPhotoObj.opened){// exit if photoBroswer object not declared
                return;
            }

            if(removeOne){
                yourPhotoObj.open(yourPhotoObj.activeIndex - 1);
            }

            if(yourPhotoObj.activeIndex != 0){
                $('.photo-browser-prev').removeClass('swiper-button-disabled').attr('aria-disabled', false);
            }else{
                $('.photo-browser-prev').addClass('swiper-button-disabled').attr('aria-disabled', true);
            }
        }
    }

解释代码： 此代码将从 photoBrowser 获取事件，然后调用我们的自定义函数，如果图像数量大于 0，此函数将从上一个按钮中删除禁用，如果想要在单击上面的按钮时启用查看上一个图像，则需要传递 true代码...我希望它能解决您的问题。

注意：如果您的 photobroser 中有特殊情况，您也可以像这样在 photobroser 中使用自定义事件：

on: {
                    opened: function(){
                        fixingF7PrevButtonIssueInRtl();
                    },
                    lazyImageLoad: function(){
                        fixingF7PrevButtonIssueInRtl();
                    }
                }