前端开发&html&css问题整理

开发小tips。

---

一.接口demo

1.收藏调用 datacoll

this.datacoll(
	{
		that:this,
		it: item,
		index,
		list,
		handel:function(status) {
				// status 返回的状态
               // that.$set(that.pageobj,'liked',status)
		}
	}
)

2.查找到某个字段就执行某个方法 findToHandle

that.findToHandle({
	obj: that.progresslist,
	that: that,
	handle: function(e) {
		let {
			obj,
			key,
			that,
			handle
		} = e;
		// 遍历obj 不存在返回false继续遍历下一层 直到条件达成 
		if (obj.danwei || obj.q_title_desc) {
			if (!that.totalAnswer[obj.q_code]) {
				that.$set(that.totalAnswer, obj.q_code, 0)
			}
		} else {
			return false
		}
	}
})

3.判断文本高度 显示展开收起按钮

	function getRow(e) {
		let { p, li, addName, addtarget, limit } = e;
		let list = $(p).find(li);
		list.each(function (i, ele) {
			let lh = parseFloat($(this).css('line-height'));
			let myh = $(this).height();

			let finalh = lh * limit; // 最高多高
			if (myh >= finalh) {
				// console.log($(p).find(addtarget).eq(i));
				// $(p).find(addtarget).eq(i).addClass(addName);
				$(this).closest(addtarget).addClass(addName);
				// debugger
			} else {
				// $(p).find(addtarget).addClass('bugou');
			}
			console.log({
				lh,
				myh,
				finalh,
				i,
				top
			})
		});
	};

if ($('#mcoty').length > 0) {
		getRow({
			p: '#mcoty',
			li: '.swiper-slide .desc',
			limit: 5,
			addName: 'isoverflow',
			addtarget: '.seemore-p',
		})
	}

二、uni-app APP问题

1. 解决uniapp 运行真机失败

main.js文件中添加 App.mpType = ‘app’

2.IOS安全距离

app-plus：{
	"safearea" : {
	//安全区域配置，仅iOS平台生效  
		"bottom" : {
		// 底部安全区域配置  
			"offset" : "none" // 底部安全区域偏移，"none"表示不空出安全区域，"auto"自动计算空出安全区域，默认值为"none"  
		}
	},
}

3.组件不能block最外层

4.去除组件console 打印解决item找不到的问题

5.toJSON 报错

console.log(this.$refs,‘refs’);

6.数据判空objJudge()

// 对象判空
 Vue.prototype.objJudge = function(obj) {
     if (obj == undefined && obj == null) {
         return false
     } else if (this.gettype(obj) == 'Object') {
         return JSON.stringify(obj) !== '{}'
     } else if (this.gettype(obj) == 'Array') {
         return obj.length !== 0
     } else if (this.gettype(obj) == 'String') {
         return obj !== '';
     } else if (this.gettype(obj) == 'Boolean') {
         return obj;
     } else if (this.gettype(obj) == 'Number') {
         return obj !== 0;
     }
 }

7.block 不能嵌套太多层

8.点击按钮后值改变了但是表单没有刷新 this.$forceUpdate() 解决

三、开发tips

1.onBackPress 页面返回事件

2.正则搜索 （c.*d 正则搜索 C开头 d结尾） ¥

3.匹配多个前提条件时的写法

let o = {
2: { // 招商总监
      ex_status: {
          0: {
              0: {
                  oneText: '',
                  twoText: '',
                  confirmText: '1'
              },
              1: {
                  mestatus:{ //是我跟进的
                      0: {
                          oneText: '1',
                          twoText: '',
                          confirmText: '2',
                      },
                      1: {
                          oneText: '1',
                          twoText: '2',
                          confirmText: '3',
                      }
                  }
              },
          },
          1:{
              1: {
                  oneText: '',
                  twoText: '1',
                  confirmText: '2'
              },
          }
      }
},
}
let arr = ['oneText', 'twoText', 'confirmText']
         arr.forEach((ele) => {
             if(mestatus) {
                 
                 this[ele] = roid[this.roid].ex_status[this.pageitem.ex_status][nowstatus].mestatus[this.pageitem.mestatus][ele]
                 // console.log(roid[this.roid].ex_status[this.pageitem.ex_status][nowstatus].mestatus[this.pageitem.mestatus],'roid[this.roid].ex_status[this.pageitem.ex_status][nowstatus].mestatus')
             } else {
                 this[ele] = roid[this.roid].ex_status[this.pageitem.ex_status][nowstatus][ele]
             }
         })               

4.微信小程序组件中定义sticky属性失效 （暂时待定）

解决方法
1）使用组件slot

<view class="commain">
        <view class="navbox"
              :style="[{ paddingTop: paddingTop + 'px' },navstyle]">
            <view class="nav-content ">
                <view class="left flex-center">
                    <block v-if="leftSlot">
                        <slot name="left"></slot>
                    </block>
                    <block v-else>
                       左侧默认
                    </block>
                </view>
                <view class="navtop flex-center">
                    <block v-if="rightSlot">
                        <slot name="right"></slot>
                    </block>
                    <block v-else>
                       右侧默认
                    </block>
                </view>
            </view>
        </view>
        <!--  下方插槽填充页面内容 -->
        <slot></slot>
    </view>

<diynav :navstyle="{position: '-webkit-sticky',position:'sticky',background:'#ffffff',opacity:1,boxShadow: '6rpx 0 9rpx rgba($color: #000000, $alpha: 0.95)'}" search logo :logoheight="32">
      <!-- 对应组件slot -->
      <view class="main"></view>
      <view class="footer"></view>
 </diynav>

2)组件内用占位元素和fixed定位实现粘性效果

5.slot插槽 组件内部传值给外部 具名插槽

<!-- 页面调用组件 -->
<myswiper >
      <template #dotSlot="{currentdot,length}">
          {{currentdot}}{{length}}
      </template>
</myswiper>

<!-- 组件内部 -->
<slot name="dotSlot" :currentdot="currentdot" :length="list.length"></slot>


<!-- 循环插槽 -->
<ul>
  <li v-for="item in items">
    <slot name="item" v-bind="item"></slot>
  </li>
</ul>

<!-- 对象抛出 -->
<myswiper >
      <template #pushslot="{pushdata}">
          {{pushdata.day}}{{pushdata.min}}
      </template>
</myswiper>

<slot name="pushslot" :pushdata="{day,hour:tows(hour),min:tows(min),sec:tows(sec)}" ></slot>

四、html&css

1.flex:1 -> flex:auto 变回默认值

2.width:100% -> width:none变回默认值

3.小程序sticky粘性头或者底部在ios端 滑动到顶部或者底部后接着滑会脱离位置使用fixed配合一个固定值不会出现该效果

4.动画书写 调用

//托盘点击换盒后
    @keyframes moveChangeBox {
        0% {
            top: 0;
        }
        
        100% {
            top: -44rpx;
        }
        
    }
 .c {
  	// 动画名 moveChangeBox 
  	// 总时长 5s
  	// 动画曲线 ease-in-out
  	// 运动次数 1或 infinite 
  	// 是否逆向播放 normal 或者 alternate 
  	// 运动结束是否保持forwards还是回到起始backwards
 	animation: moveChangeBox 5s ease-in-out 1 normal forwards;
 }

5.transform: matrix(1, 0, 0, 1, 0, 0);

6.transform: rotateY(180deg) translate3d(0px, 0px, 2rpx); Y轴翻转 z轴提高

7.父级添加透视距离（perspective: 1000px; ）子项添加（transform-style: preserve-3d）

8.flex-shrink:0; 当指定view为flex布局后，给子元素定义width是不起效果的。

9.网格布局

// 四列平分 列间距18rpx
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-column-gap: 18rpx;
grid-row-gap: 18rpx;

第一项占两行两列 其余分布
grid:
  'myArea myArea . . .'
  'myArea myArea . . .';


自定义布局
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
 
.grid-container {
  display: grid;
  grid:
    'header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer';
}

10.动画参数（animation）

<style>
div {
  width: 100px;
  height: 100px;
  background-color: aquamarine;
  /* 动画名称 */
  animation-name: move;
  /* 动画花费时长 */
  animation-duration: 2s;
  /* 动画速度曲线 */
  animation-timing-function: ease-in-out;
  /* 动画等待多长时间执行 */
  animation-delay: 2s;
  /* 规定动画播放次数 infinite: 无限循环 */
  animation-iteration-count: infinite;
  /* 是否逆行播放 normal正常 reverse反向  alternate奇数正 偶数反 alternate-reverse 奇数反 偶数正*/
  animation-direction: alternate;
  /* 动画结束之后的状态 ： */
  animation-fill-mode: forwards;
}

div:hover {
  /* 规定动画是否暂停或者播放 */
  animation-play-state: paused;
}
</style>

11.遮罩

   background: linear-gradient(180deg,#fff,hsla(0,0%,100%,0));
   height: 44px;
   position: absolute;
   top: 0;

12.swiper 插件

1）normalizeSlideIndex:true 可以使你的活动块（active slide）指示为最左边的那个slide 默认是true；

13.video ios 自动播放

1）webkit-playsinline=“” playsinline=“” autoplay=“autoplay” loop=“loop” muted=“muted”

14.canvas画布

1）图像

2）文本

var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);