LayUI-低版本flow组件的“加载更多”文本动态更改

LayUI版本：2.8.1

需求：

对flow组件的“加载更多”文本有多语言的处理，需随语言变化更改

但flow组件的“加载更多”文本在2.9.11以上版本才实现自定义

 

组件页面的结构

 

解决方法

通过监视“加载更多“的上层标签来实现文本动态变更

 

代码如下

 var moreText = "@Localizer["LoadMore"]";//加载更多-多语言
/**
 * flow 加载更多-多语言处理
 */
const callback = function (mutationsList, observer) {
    for (let mutation of mutationsList) {
        if (mutation.type === 'childList') {
            mutation.addedNodes.forEach(i => {
                if (i.nodeName == 'CITE') {//加载更多标签为CITE
                    i.lastChild.data = moreText //moreText为多语言内容
                    i.firstChild.data = moreText
                }
            })
        } 
    }
};
//创建观察者实例
const observer = new MutationObserver(callback);

function replaySearch() {
         flow.load({
             elem: '#content', // 流加载容器
             scrollElem: '#content', // 滚动条所在元素，一般不用填，此处只是演示需要。
             // isAuto: true,
             // isLazyimg: true,
             end: endStr,
             // moreText: moreText,//2.8.1版本不支持
             done: function (page, next) { // 加载下一页
                 //flow 加载更多-多语言处理
                 const targetNode = $('.layui-flow-more a')[0]// document.getElementsByClassName('layui-flow-more')[0].children[0]
                 const config = { attributes: true, childList: true, subtree: true };
                 observer.observe(targetNode, config);//观察对象flow组件变化
                 //下一页加载
                 setTimeout(function(){
                    var lis = [];
                    for(var i = 0; i < 8; i++){
                      lis.push('<li>'+ ( (page-1)*8 + i + 1 ) +'</li>')
                    }
                    
                    // 执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                    // pages 为 Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                    next(lis.join(''), page < 10); // 此处假设总页数为 10
                  }, 520);
             }
    });
 }

 

observe 方法的配置项

attributes: 当元素的属性变化时触发回调（默认为 false）。
childList: 当目标节点的子节点被添加或删除时触发回调（默认为 false）。
subtree: 当设置为 true 时，监视目标节点及其所有后代节点的变化（默认为 false）。
characterData: 当节点的文本内容变化时触发回调（默认为 false）。
attributeOldValue: 当属性变化时，记录变化前的属性值（默认为 false）。
characterDataOldValue: 当文本节点变化时，记录变化前的文本内容（默认为 false）。
attributeFilter: 一个属性名称的数组，指定监听的属性变化（如果不设置，则监听所有属性）。

因后续异常变更代码具体参考异常处理

var moreText = "@Localizer["LoadMore"]";//加载更多-多语言

//创建观察者实例
var observer = new MutationObserver(flowCallback);

/**
 * flow 加载更多-多语言处理
 */
function flowCallback(mutationsList, observer) {
    for (let mutation of mutationsList) {
        if (mutation.type === 'childList') {
            mutation.addedNodes.forEach(i => {
                if (i.nodeName == 'CITE') {
                    i.lastChild.data = moreText
                    i.firstChild.data = moreText
                }
            })
        }
    }
}

function replaySearch() {
         flow.load({
             elem: '#content', // 流加载容器
             scrollElem: '#content', // 滚动条所在元素，一般不用填，此处只是演示需要。
             // isAuto: true,
             // isLazyimg: true,
             end: endStr,
             // moreText: moreText,//2.8.1版本不支持
             done: function (page, next) { // 加载下一页
                 //flow 加载更多-多语言处理
                 const targetNode = $('.layui-flow-more a')[0]// document.getElementsByClassName('layui-flow-more')[0].children[0]
                 const config = { attributes: true, childList: true, subtree: true };
                 observer.observe(targetNode, config);//观察对象flow组件变化
                 //下一页加载
                 setTimeout(function(){
                    var lis = [];
                    for(var i = 0; i < 8; i++){
                      lis.push('<li>'+ ( (page-1)*8 + i + 1 ) +'</li>')
                    }
                    
                    // 执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                    // pages 为 Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                    next(lis.join(''), page < 10); // 此处假设总页数为 10
                  }, 520);
             }
    });
 }