小鹿线d2 样式穿透

Posted 2021-07-22 Kooklen_xh

主窗口：extras:{
                         title:str
                     },```
```javascript

新页面：<script type="text/javascript">
            mui.init()
            mui.plusReady(function () {
                var self = plus.webview.currentWebview();
                alert(JSON.stringify(self.title))
            })
        </script>```
  

```javascript

//index.css
header h1{
	padding-top:1.333333rem;
	padding-left:0.533333rem;
}
header ul{
	display: flex;
	justify-content: space-around;
	padding:0.8rem 0.533333rem 0 0.533333rem;
}
header ul li{
	display: flex;
	flex-direction: column;
	margin:0.533333rem;
	text-align: center;
}
header ul li i{
	width: 1.866666rem;
	height: 1.866666rem;
	line-height: 1.866666rem;
	font-size:0.96rem!important;
	background-color: #fff;
	border-radius: 100%;
	box-shadow: -0.053333rem -0.053333rem 0.266666rem #ccc;
}
header ul li span{
	margin-top:0.266666rem;
	font-size:0.426666rem;
	font-weight: 500;
}
footer{
	position: fixed;
	bottom: 0;
	left:0;
	width: 100%;
	height: 2.133333rem;
}
footer > i{
	position: absolute;
	left:50%;
	top:-2.293333rem;
	width: 1.76rem;
	height: 1.76rem;
	margin-left: -0.88rem;
	font-size: 0.96rem!important;
	line-height: 1.76rem;
	text-align: center;
	background-color: #fff;
	border-radius: 100%;
	box-shadow: -0.053333rem -0.053333rem 0.266666rem #ccc;
}
footer ul{
	display: flex;
	justify-content: space-around;
}
footer ul li i{
	font-size: 0.64rem!important;
}
footer ul li span{
	font-size: 0.48rem;
}

::v-deep .ly-tabbar{
  box-shadow: none;
}

样式穿透

八、swiper

8.1 下载：npm install vue-awesome-swiper@3.1.3 --save
8.2 引入 和 配置

	https://www.cnblogs.com/userGao/p/13362097.html

九、better-scroll

9.1 下载
	npm install better-scroll -S
9.2 引入
	import BScroll from 'better-scroll'
9.3 使用
	const bs = new BScroll('.wrapper',{})
	
	*** 注意，这家伙老多问题了

十、ref

功能：获取dom
场景：获取dom高度|宽度...

十一、nextTick

功能：获取更新后的dom
大白话（dom更新完毕了，执行nextTick里面代码）
场景：数据是在created中请求过来的，然后在created赋值数据渲染到template部分better-scroll，就不生效，原因：created还没有$el，所以要加入$nextTick

******* Vue面试题 ******

一、vue中style中的scoped原理是啥吗? (3%)

只要加入scoped就会在节点上，额外增加一个属性: data-v-xxxx

css选择器，可以根据属性进行选择。这样就感觉造成了一个css局部化

二、v-show和v-if的区别

v-if是创建和删除

v-show是显示和隐藏

三、vue性能优化

3.1 接口是展示类的数据

	冻结优化 : Object.freeze()