零散知识点汇总（二）

一、 css部分

1. 动态写css行内样式（拼接）

  <div class="team" v-for="(item, index) in teams" :key="index" :style="{backgroundImage:'url(' + item.bg + ')'}">
    <!-- 分数 -->
    <div class="progress" :style="{height: (item.score+50) + 'px'}">
      <a :href="'tel:' + item.mobile">{{item.mobile}}</a>
      <p class="score">{{item.score}}<span>分</span></p>
      <img :src="`//static.luckevent.com/projects/outing2021/ac_detail${index}.png`">
      <div class="line" :style="{height: item.score + 'px'}"></div>
    </div>
  </div>

2. js 获取父标签的第二个td子标签的第一个div子标签,并修改透明度为0.4

$(this).parent().children("td").eq(1).children('div').first().style.opacity = 0.4

3. css超过一定长度显示省略号（需指定好宽度）

{
   width: 10vw;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
}
{
   width: 10vw;
   word-break: break-all;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2; /* 这里是超出几行省略 */
   overflow: hidden;
}

4. 实现点击日期排他

<template>
  <div class="agenda-link1">
    <div class="dates">
      <div :class="item.bol? 'day-bg day':'day'" v-for="(item,index) in dates" :key="index" @click.stop="toDay(item)">{{item.day}}</div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: 'agenda-link1',
  data () {
    return {
      dates: [
        {
          bol: true,
          day: 22
        },
        {
          bol: false,
          day: 23
        }],
    }
  },
  created () {},
  components: {},
  mounted () {},
  methods: {
    // 点击某一个日期
    toDay(target) {
      console.log(target)
      this.dates.forEach(item => {
        if(item.day === target.day) {
          item.bol = true
        } else {
          item.bol = false
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.agenda-link1 {
  width: 100vw;
  min-height: 100vh;
  background-color: #f8f8f8;
  padding: 0 0 5vw;

  .dates {
    width: 100vw;
    height: 8.533333vw;
    border-top: 1px solid #f39801;
    border-bottom: 2px solid #f39801;
    background-color: #fff;
    overflow: hidden;
    display: flex;

    .day {
      flex-grow: 1;
      font-size: 20px;
      color: #f39801;
      height: 8.266667vw;
      line-height: 8.266667vw;
      background-color: #fff;
      text-align: center;
    }

    .day-bg {
      color: #fff;
      background-color: #f39801;
    }
  }
}
</style>

5. video标签

video标签和资源宽高比例不一样，视频资源不会变形，会自动宽或者高占满。

6. display:inline-block 居中对齐问题

.item {
    display: inline-block;
    vertical-align: middle;
}

7. 去除滚东条样式，维持滚动效果

  .agenda::-webkit-scrollbar {
  display: none;/*隐藏滚轮*/
  }

8. css文字颜色渐变

  .text {
	    background: linear-gradient(#DC1010, #90ED5A, #2F57E8); 
	    -webkit-background-clip:text; 
	    background-clip: text;
	    -webkit-text-fill-color:transparent;
  }
  
  &&tip： 
	background: -webkit-linear-gradient(…) 为文本元素提供渐变背景。
	webkit-text-fill-color: transparent 使用透明颜色填充文本。
	webkit-background-clip: text 用文本剪辑背景，用渐变背景作为颜色填充文本。

二、 JS部分

1. 判断用户所用设备，并输出

  	_isMobile() {
      let flag = navigator.userAgent.match(
        /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
      );
      return flag;
    },

2. 获取起止日期相差天数

const times = new Date('2021-08-27')- new Date('2021-08-24')  // 相差毫秒数
this.totalDays = Math.floor(times/(24*3600*1000)) // 相差天数

3. 滚动条触底事件

scrollEvent(e) {
  // console.log(e,'e')
  if(e.srcElement.scrollTop+e.srcElement.offsetHeight>e.srcElement.scrollHeight-1) { 
    console.log("下一页") 
    // 触发方法
    this.getPhotoList()
  }
},

4. 手指上滑去下一页

	//结构
    <div class="home" @touchstart="toNextStart" @touchend="toNextEnd"></div>
  	// 方法
    toNextStart (el) {
      this.beforeY = el.targetTouches[0].clientY
    },
    toNextEnd (el) {
      this.afterY = el.changedTouches[0].clientY
      if (this.beforeY - this.afterY > 100) this.$router.push("/flower")
    }

5. 判断对象有没有空值

	const form： {a:'', b:'', c:''}
	
     let k = false
     
     Object.keys(form).forEach(key => {
	   // a为否时，b框不显示死。
	   // 让a为否时，给b一个默认值，不让他为空
       if(key == 'a' && form[key] == "否") {
         form.b = "无"
       }
	   // 对象中属性值非空检查
       if(!form[key].trim()) {
         k = true
       }
     })
     if(k) return this.$toast('信息填写不完整')

6. window.location.href跳转链接报403错误（权限不足，拒绝访问）

解决方法： 
	隐藏请求头访问
操作：
    1. 在index.html文件中加入 <meta name =referrer content=no-referrer>
    2. 接着正常window.location.href = ''跳转就行

7. history.replaceState替换url地址
   使用场景： 配合url传参使用，需要显示的是一个地址，实则跳转另一个地址
   history.replaceState({}, “”, “显示地址”);