js开发技巧

2021-02-03 前端 PV:

列表三个元素排一行的布局问题

背景：要求每三个元素占满一行，每个元素之间的间距固定，每个元素的宽度随着设备的分辨率大小适配。
解决方案:

将后端返回的一维数组列表转换成二维数组，每三个元素为一组。
类似于这样的数据结构:

[
  [{name: "han"},{name: "han"},{name: "han"}],
  [{name: "han"},{name: "han"},{name: "han"}],
  [{name: "han"},{name: "han"},{name: "han"}],
  [{name: "han"},{name: "han"},{name: "han"}]
]
// js处理方法
initData () {
  // 对列表数据处理
  // 添加showChilds属性 首个值的子列表默认展示
  // childs的每三个子元素一组——转变为二维数组 方便样式渲染
  this.list.forEach((item, index) => {
    // 这是vue中新增一个属性控制子列表的展示/隐藏-双向绑定$set
    // index == 0 && (this.$set(item, 'showChilds', true))
    // index != 0 && (this.$set(item, 'showChilds', false))
    let resIpList = []
    for (let i=0; i < item.ipList.length; i+=3) {
      let sliceArr = item.ipList.slice(i, i+3)
      // 元素2个时，插入一个空元素，防止样式混乱
      sliceArr.length == 2 && sliceArr.push({})
      resIpList.push(sliceArr)
    }
    // item.ipList = resIpList
    // 覆盖原有的ipList属性会导致数据问题，所以新起了一个属性名ipListNew
    this.$set(item, 'ipListNew', resIpList)
  });
}

js动态设置每个元素的宽度——整个屏幕宽度减去间距/3

this.$nextTick(() => {
  let allWidth = Q.$(".cabinet-area").width()
  let spaceWidth = Q.$(".cabinet-area").css("padding-left").split("px")[0]
  // 动态计算元素宽度
  let itemWidth = (parseInt(allWidth) - parseInt(spaceWidth )* 6) / 3
  Q.$(".ip-item").width(itemWidth)
  Q.$(".ip-item").height(itemWidth / 0.8) // 图片宽高比0.8
})

css属性采用flex布局，默认不换行,元素间间距相等space-between
1
2
3
4
.ip-list {
display: flex;
justify-content: space-between;
}

利用数组的并集交集思想解决复选框的正选反选问题

selectChange () {
  // 先过滤一层，把游戏选中的数据过滤出来（无所谓正选反选)
  let selectArr = Object.keys(this.selectList)
  let filterArr = this.gameList.filter((item) => {
    return selectArr.indexOf(item.name) > -1
  })
  // 正选 数组的交集 选中的数组与serverList的交集
  // 反选 数组的差集 选中的数组与serveList的差集
  let res = {}
  for (let gameItem of filterArr) {
    gameItem.serverList.filter(item => {
      this.formItem.switch ?
      this.selectList[gameItme.name].includes(item.name) && (res[item.name] = JSON.parse(item.jsons)) :
      !this.selectList[gameItme.name].includes(item.name) && (res[item.name] = JSON.parse(item.jsons))
    })
  }
  this.serverStrs = res // 选中的json格式化的结果
}

弹框禁止背景滚动，scroll维持原有距离，滚动条不默认跳到顶部

if (true) { // 弹框出现
    if (ffsUtils.is_ffsPhoneInfo() && Q.ua.IOS) {
      // 如果是IOS环境允许滚动
      //do nothing
      // this.prevent();
    } else {
      // 控制弹幕的背景颜色不因为scroll的改变而改变
      Q.cookie.set('dm_no_change', 'show')
      Q.$("body").css("top", -window.scrollY + "px");
      Q.$("body").css("position", "fixed");
    }
} else {
  if (ffsUtils.is_ffsPhoneInfo() && Q.ua.IOS) {
    //do nothing
  } else {
    Q.cookie.set('dm_no_change', '')
    let scrollY = -parseInt(Q.$("body").css("top"))
    Q.$("body").css("position", "static");
    Q.$("body").css("top", "");
    window.scrollTo(0, scrollY);
  }
}

// 禁止默认事件
prevent() {
  this.$refs["mask"].addEventListener(
    "touchmove",
    function (e) {
      e.preventDefault();
    },
    false
  );
},