layui中上一页，下一页，跳转到第几页，确定如何变为英文

Posted 2023-04-11

参考技术A

我来说个解决方案吧， layui翻页是用的中文unicode，所以不支持英文或者其他国家的语言，但是我们系统有时候是需要英文或者其他语言，所以我们可以使用一个折中的方法来到达这个需求。

首先，我们需要在程序中定义一个多语言的变量。比如  页  var layuiGo = "中文，英文，希伯来文等等"

然后再layui中找到页对应的unicode编码，替换为自己的变量，我截几个图吧。

layui中的代码

layui插件页面样式

class="layui-laypage-btn">&#x786e;&#x5b9a;</button>'

比如这个确定按钮对应的就是layui中的这行代码，其中&#x786e;&#x5b9a;就是确定的意思，我们把这个值改为自己在前端定义的值 改为如下方式

class="layui-laypage-btn">'+ layuiGo +'</button>'

其中layuiGo就是我定义的变量名

自己前端定义的变量

这样就可以支持多语言了

Nextjs如何在转到下一页时不卸载上一页（保持状态）

【中文标题】Nextjs如何在转到下一页时不卸载上一页（保持状态）

【英文标题】：Nextjs how to not unmount previous page when going to next page (to keep state)

【发布时间】：2020-03-26 05:06:09

【问题描述】：

我们在我们的网络应用程序中使用 Nextjs。 我们希望保留用户访问的页面堆栈，以保持组件在返回导航时的状态。 我们应该怎么做？ 我试过https://github.com/exogen/next-modal-pages，但它在后面再次调用了前几页的getInitialProps。

【参考方案1】：

这是我使用自定义 _app.js 的解决方案

import React,  useRef, useEffect, memo  from 'react'
import  useRouter  from 'next/router'

const ROUTES_TO_RETAIN = ['/dashboard', '/top', '/recent', 'my-posts']

const App = ( Component, pageProps ) => 
  const router = useRouter()
  const retainedComponents = useRef()

  const isRetainableRoute = ROUTES_TO_RETAIN.includes(router.asPath)

  // Add Component to retainedComponents if we haven't got it already
  if (isRetainableRoute && !retainedComponents.current[router.asPath]) 
    const MemoComponent = memo(Component)
    retainedComponents.current[router.asPath] = 
      component: <MemoComponent ...pageProps />,
      scrollPos: 0
    
  

  // Save the scroll position of current page before leaving
  const handleRouteChangeStart = url => 
    if (isRetainableRoute) 
      retainedComponents.current[router.asPath].scrollPos = window.scrollY
    
  

  // Save scroll position - requires an up-to-date router.asPath
  useEffect(() => 
    router.events.on('routeChangeStart', handleRouteChangeStart)
    return () => 
      router.events.off('routeChangeStart', handleRouteChangeStart)
    
  , [router.asPath])

  // Scroll to the saved position when we load a retained component
  useEffect(() => 
    if (isRetainableRoute) 
      window.scrollTo(0, retainedComponents.current[router.asPath].scrollPos)
    
  , [Component, pageProps])

  return (
    <div>
      <div style= display: isRetainableRoute ? 'block' : 'none' >
        Object.entries(retainedComponents.current).map(([path, c]) => (
          <div
            key=path
            style= display: router.asPath === path ? 'block' : 'none' 
          >
            c.component
          </div>
        ))
      </div>
      !isRetainableRoute && <Component ...pageProps />
    </div>
  )


export default App

要点 - https://gist.github.com/GusRuss89/df05ea25310043fc38a5e2ba3cb0c016

【讨论】：

我们找到了这个库：github.com/CJY0208/react-activation

【参考方案2】：

您不能“通过不卸载来保存页面的状态”，但您可以将应用的状态保存在 _app.js 文件中，并从中重建上一页。

检查来自next 的仓库中的redux example。