《关于前端的一些小问题》

jquery 相关问题

换行省略号

由于中文字符换行和英文字符换行截断方式不同，导致样式上出现问题


以上是设置了单词换行后显示省略号的样子


以上是不设置单词换行的样子

原因是当长英文链接换行时，英文被作为一个完整单词而不进行换行

上述代码为对 p 标签设置超出 2 行省略多余内容

对于这里的英文链接（被作为单词处理）如果这里没有设置 width:100%的话，内容会超出宽度，导致整体样式被挤出，这会导致原本使用固定样式 fixed 的元素因为这一元素的特殊情况而改变位置，导致一些特殊 bug。

因此给整个 p 标签设置宽度 width 或最大宽度 max-width，首先可以解决样式影响的问题，接着就需要解决如何像其他内容一样超出 2 行显示省略号（如何显示省略号就不写在这了），具体方式就如上方所说，给标签设置单词换行 word-break:break-all 即可解决。

jquery 中的 dropload 插件使用方式

dropload的上拉加载功能

$(function () {
  // dropload
  $(".上拉对象的类名").dropload({
    scrollArea: window,
    // 上拉加载动态样式
    domDown: {
      domClass: "dropload-down",
      domRefresh: '<div class="dropload-refresh">上拉加载更多</div>',
      domLoad:
        '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
      domNoData: '<div class="dropload-noData">已无数据</div>',
    },
    // 上拉加载请求数据
    loadDownFn: function (me) {
      // 每次请求时页数+1
      shuj.curPage++;
      // 定义一个数组用于存放请求到的数据
      var news = [];
      //ajax请求数据
      $.ajax({
        type: "POST",
        contentType: "application/json",
        dataType: "json",
        // url请求的接口
        url: process.env.address + "/vr/news/web/getNewsPage",
        // data为请求参数，这里统一封装成了一个对象shuj
        data: JSON.stringify(shuj),
        success: function (backdata) {
          // 获取数据后 对数据的时间进行重新格式化 并作为新字段加入该数据
          backdata.data.list.map((res, index) => {
            res.time = {
              nian: new Date(res.release_time).getFullYear(),
              yue:
                new Date(res.release_time).getMonth() + 1 < 10
                  ? "0" + Number(new Date(res.release_time).getMonth() + 1)
                  : new Date(res.release_time).getMonth() + 1,
              ri:
                new Date(res.release_time).getDate() < 10
                  ? "0" + new Date(res.release_time).getDate()
                  : new Date(res.release_time).getDate(),
            };
          });
          // 返回成功该数据，就将其丢进news空数组
          if (backdata.data.list) {
            news = backdata.data.list;
            // console.log(news)
          }
        },
      });
      // 设置定时器延迟添加，避免请求太快或过于频繁导致数据加载过快
      setTimeout(function () {
        //返回数据为0条时终止
        if (news.length == 0) {
          me.resetload();
          me.lock();
          me.noData();
          me.resetload();

          return;
        }
        var str = "";
        //将请求到的数据展示到页面
        for (var i = 0; i < news.length; i++) {
          // console.log(news[i])
          str += `<li id="${news[i].news_id}">
            <img src="${news[i].thumbnail_img}" alt="">
            <div>
              <p>${news[i].title}</p>
              <span>${news[i].time.nian}/${news[i].time.yue}/${news[i].time.ri}</span>
            </div>
              </li>`;
        }
        // 给该div添加str
        $(".xinwen_zhus2").append(str);
        me.resetload();
      }, 500);
    },
  });
});

上拉加载下拉刷新完整案例

$(".element").dropload({
  scrollArea: window,
  loadDownFn: function (me) {
    $.ajax({
      type: "GET",
      url: "json/more.json",
      dataType: "json",
      success: function (data) {
        alert(data);
        fn();
        // 代码执行后必须重置
        me.resetload();
      },
      error: function (xhr, type) {
        alert("Ajax error!");
        me.resetload();
      },
    });
  },
});

$("#element").dropload({
  //scrollArea很关键，要不然加载更多不起作用
  scrollArea: window,
  domUp: {
    domClass: "dropload-up",
    domRefresh: '<div class="dropload-refresh">↓下拉刷新</div>',
    domUpdate: '<div class="dropload-update">↑释放更新</div>',
    domLoad:
      '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
  },
  domDown: {
    domClass: "dropload-down",
    domRefresh: '<div class="dropload-refresh">↑上拉加载更多</div>',
    domLoad:
      '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
    domNoData: '<div class="dropload-noData">暂无数据</div>',
  },
  loadUpFn: function (me) {
    //下拉刷新需要调用的函数
    $.ajax({
      type: "GET",
      url: "json/more.json",
      dataType: "json",
      success: function (data) {
        alert(data);
        fn();
        // 代码执行后必须重置
        me.resetload();
      },
      error: function (xhr, type) {
        alert("Ajax error!");
        me.resetload();
      },
    });
    //重置下拉刷新
    me.resetload();
  },
  loadDownFn: function (me) {
    //上拉加载更多需要调用的函数
    alert("上拉加载更多需要调用的函数");
    //定时器函数,为了看出上拉加载更多效果
    setTimeout(function () {
      $.ajax({
        type: "GET",
        url: "json/more.json",
        dataType: "json",
        success: function (data) {
          alert(data);
          fn();
          // 代码执行后必须重置
          me.resetload();
        },
        error: function (xhr, type) {
          alert("Ajax error!");
          me.resetload();
        },
      });
      // 每次数据加载完，必须重置
      me.resetload();
    }, 1000);
  },
});

dropload 插件的参数

有关不同端分享链接时的跳转问题

比如当 pc 端和移动端未使用 h5 方式做响应式而是拆分为两个部分进行开发，应尽量保持文件名相同，比如 pc 文件路径下有 home.html，那么移动端也最好起名 home。尽量避免多个文件对一个文件的情况发生。当遇到 pc 端有 2 个页面，而移动端将两个页面通过 tab 栏显示在一页中时，路由跳转就比较麻烦了。

jquery 处理路由的方式

我们都知道 vue-router 控制路由相当便携，做到 tab 栏切换时切换局部区域和路由简直小菜一碟，但是同类操作在使用 jquery 编写时则比较麻烦，需要使用到 pushState，具体可以参考一下做法。

$(".className").click(function () {
  let i = $(this).attr("id"); //下标的一种写法
  history.pushState(null, null, `xxx.html?name=${i}`);
  $(this).addClass("daactive").siblings().removeClass("daactive");
  $("#daneizhu").find(`.${i}`).show().siblings().hide();
  debounce(shareInit(), 500);
});

上述点击事件实现了 tab 栏切换，样式变动，页面内容切换，同时路由产生变化并能够实现实时分享（一般分享是定死的，比如进入某页面 a，即分享该页面 a，所以微信分享方法直接布局在所有页面即可。但如有以下需求场景：进入一个聚合页，该页面通过 tab 切换展示 a，b 两种内容，如果初始进入页面展示的是 a，在页面中切换为 b 再分享，若无路径更改和重新调用分享方法，则分享出去的内容依旧为 a，所以使用上述代码解决这类需求）。

通过上述代码的 pushState api 使得 jquery 也能够做到触发事件时修改页面路径。路由切换问题得到了解决，但是分享内容依旧不生效。此时需要去判断，微信分享 api 触发时机是在什么时候。一般来说，在进入某一页面时，即调用分享 api，因为分享功能是需要获取当前页面 url 的，所以在一进入页面时，就会拿取当前 url。这导致了后续点击 tab 栏触发事件，无论切换多少次路由，提供给分享 api 的 url 链接始终为进页面时的初始 url。
解决方案：在 tab 栏点击事件时，再此调用微信分享 api 拿取当前 url 即可。（注：为避免 tab 栏重复快速切换导致 js 不断被调用，最好添加节流操作）。

移动端判断不同端

if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
  //alert(navigator.userAgent);
  执行想要执行的内容;
} else if (/(Android)/i.test(navigator.userAgent)) {
  //alert(navigator.userAgent);
  执行想要执行的内容;
} else {
  执行想要执行的内容;
}