关于#低代码#的问题,如何解决?

你好,我是天翎V1.6版本使用者,最近在使用低代码平台的时候出现部分表单保存的时候出现链接已重置的问题,或者是响应许久后出现报错,具体如下图

img

img

  • 你可以看下这个问题的回答https://ask.csdn.net/questions/7472583
  • 这篇博客你也可以参考下:使用上下拉条渲染部分数据方法,解决表格有大量数据又需要显示在一页进行批量操作时的卡顿问题
  • 除此之外, 这篇博客: 仿微信移动端的底部导航切换,显示高亮文字和图片中的 因为之前没写过这养分开切换显示的操作,只写过针对当前对象进行切换,但是,其实原理和思路很简单: 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  • 就是点击选中当前元素,改变当前元素的显示效果,当切换另一个元素的时候,移除当前元素的状态,将切换后的元素加上高亮的显示效果。

    我首先想到的就是使用javascript的removecClass和addClass来进行操作,因为之前有写过密码的显示和隐藏的效果:密码的明文密文的显示和隐藏效果,采用的就是removecClass和addClass来实现的。

    在实现底部导航切换的过程中,我也使用了这种方式,但是,后来我想,如果用户在网页端查看的时候,禁掉了javascript的执行,样式的功能就不能达到我预期想要达到的效果了。所以,在js无果之后,遂决定采用CSS来进行操作。


    HTML部分(经验):

    <div class="btn_menubar_bottom">
      <div class="btn_experience"></div>
        <a href="" class="btn-not-experience btn-experience"> //重点
          <span class="play_experience selected">经验</span>
        </a>
      <div class="btn_avator">
        <a href="" class="btn-not-avatared btn-avatared"> //重点
          <span class="play_avatar">我的</span> 
        </a>
      </div>
    </div>

    HTML部分(我的):

    <div class="btn_menubar_bottom">
      <div class="btn_experience">
        <a href="" class="btn-not-experience"> //重点
          <span class="play_experience">经验</span>
        </a>
      </div>
      <div class="btn_avator">
        <a href="" class="btn-not-avatared"> //重点
          <span class="play_avatar selected">我的</span> 
        </a>
      </div>
    </div>

    不同的地方在于,a标签里定义的class不同

    SCSS部分:

    .btn_menubar_bottom {
      background: #fff;
      position: fixed;
      bottom: 0;
      width: 100%;
      height: 50px;
      line-height: 50px;
      .btn_experience, .btn_avator{
        width: 50%;
        float: left;
        border-top: 1px solid #ddd;
        text-align: center;
      }
      .btn-not-experience {
        background-image: image-url('icon_gray.png');
        background-repeat: no-repeat;
        background-size: 20px;
        background-position: 50% 8px;
        text-align: center;
        padding-top: 14px;
        font-size: 12px;
        display: inline-block;
        .play_experience {
          &.selected {
            color: #49c114;
          }
        }
      }
      .btn-experience {
        background-image: image-url('icon_green.png');
      }
    
      .btn-not-avatared {
        background-image: image-url('icon_head_green.png');
        background-repeat: no-repeat;
        background-size: 20px;
        background-position: 50% 8px;
        text-align: center;
        padding-top: 14px;
        font-size: 12px;
        display: inline-block;
        .play_avatar {
          &.selected {
            color: #49c114;
          }
        }
      }
      .btn-avatared {
        background-image: image-url('icon_head_gray.png');
      }
    }

    解释一下:图片的后缀有gray的就是灰色的icon图标,有green就是绿色高亮的图标。
    icon图标 是根据不同的页面切换,更改不同的class来操作的,文字的高亮也是根据点击不同的文字,用selected来控制文字点击显示后的效果。
    布局很有用,尽量在a标签上直接给class加样式,文字部分只显示文字,这样在切换图片的时候,会比较方便,止痒更改当前的class的选择就好了。如果你图片一个div,文字又一个div,这样子在做切换的时候,会比较麻烦,会增加更多的工作量。


    CSS如果能解决掉问题,能不用javascript的地方,就尽量少用javascript来实现。


    这样就把效果图要的样式效果实现了 ~

  • 您还可以看一下 刘国柱老师的热更新框架设计之热更流程与热补丁视频课程课程中的 创建校验文件_递归算法遍历指定路径所有文件思路小节, 巩固相关知识点