html - 照片浏览器中的framework7 rtl上一个/下一个按钮

Question

我在使用“照片浏览器上一个、照片浏览器下一个”按钮时遇到问题 无法正常工作

检查这个

它是 2 个，共 3 个，但上一个按钮被禁用，当我使用这种样式时它可以工作

.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);
            }
        }
    }

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

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

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