8. 如何才能无情的将scroll-view产生的滚动条抛弃
默认状态
<template> <view class="page-demo"> <view class="srcool-box"> <scroll-view scroll-y="true" class="cont-scrool"> <view class="demo-height" v-for="(item,index) in listTypecont" :key="index"> {{ item.name }} </view> </scroll-view> </view> <view class="bottom"> 确认按钮 </view> </view> </template> <script> export default { data() { return { listTypecont:[ {name:"司藤"}, {name:"三生三世十里桃花"}, {name:"宸汐缘"}, {name:"半妖司藤"}, {name:"百岁之约，一言为定"}, {name:"全部"}, {name:"司藤1"}, {name:"三生三世十里桃花2"}, {name:"宸汐缘3"}, {name:"半妖司藤4"}, {name:"百岁之约，一言为定5"}, {name:"全部6"}, {name:"半妖司藤7"}, {name:"百岁之约，一言为定8"}, {name:"全部9"}, ], }; }, } </script> <style> .page-demo{ display: flex; flex-direction: column; width: 100%; height: 100vh; overflow-y: auto; } ::-webkit-scrollbar { width: 0; height: 0; color: transparent; display: none; } .srcool-box{ flex: 1; } .cont-scrool{ margin-bottom:100rpx; } .demo-height{ height: 100rpx; text-align: center; line-height: 100rpx; vertical-align: middle; background-color: red; border-bottom: 1px solid #ccc; } .bottom{ position: fixed; bottom: 0; height: 100rpx; width: 100%; background: blue; text-align: center; } </style>
一顿操作之后
我们的功臣
::-webkit-scrollbar { width: 0; height: 0; color: transparent; display: none; }
9 推倒vue指令,自定义v-focus指令
<body> <div id="app"> <input type="text" value="" v-focus> </div> <script> Vue.directive("focus", { bind: function (el) { }, inserted: function (el) { el.focus(); }, }) var vm = new Vue({ el: "#app", data: { } }); </script> </body>
此时，尤大大走过；小伙子不错；看你代码惊奇；跟着我；我传你神奇功法
醒醒，做做梦了；讲讲你刚刚写的什么玩意；没有注释啊；怎么看？
赶紧擦了擦口水：
bind inserted 这两个函数只会执行一次哦，
数据发生改变的时候，updated可能会执行多次哦。
大招：
和css样式有关的操作 放在bind函数中
和js行为有关的操作 可以写在inserted()这个函数中去
bind:每当指令绑定到元素上的时候，就会立刻执行bind这个函数，
在这三个函数中，第一个参数永远是el,表示被绑定了指令的那个元素，这个el是一个原生的js对象。
inserted：表示元素插入到DOM中的时候，会执行inserted函数。
updated:当数据跟新的时候，就会执行updated,可能会触发多次
说这么多，我要眼见为是实;上图啊！！！！
10 div要上天了,没有有人管一下
<body> <div id="app"> <div id="pcontent" contenteditable="true" ref="pvalue" @blur="addBlur">22323</div> </div> <script> var vm = new Vue({ el: "#app", data: { }, methods: { addBlur() { alert(document.querySelector("#pcontent").innerText); } }, }); </script> </body>
看看上面这一段代码会发生什么
很简单嘛；就是div；等等，眉头紧锁，感觉事情并不简单；
contenteditable="true" 难道说div可以编辑
有点不敢相信，天降div;
不仅div可以编辑,p标签页可以编辑
11.配角迎来高光时刻
2020.4.4）是全国哀悼日;
在浏览B站，腾讯视频，等网站时，网站变成灰色的了.
我去看了一下腾讯的做法，腾讯是将所有的图片换成了灰色的。
那么B站是如何做的呢？
B站是通过，css3的属性去控制的，
首先找到 html. 在 B 站的 html 中有一个 gray 这一个类。
然后全局搜索。gray.
然后你会发现有这么一段代码。
如果将这一段代码去除，网站将会恢复回来的彩色。
<ul class="demo"> <li>11</li> <li>11</li> <li>22</li> <li>33</li> <li>44</li> </ul> <img src="../dm.jpg" class="img-size"> <style> .demo { display: flex; width: 300px; height: 40px; line-height: 40px; list-style: none; text-align: center; } .demo li { width: 50px; color: antiquewhite; background: pink; padding-left: 0; } .img-size { width: 100px; height: 100px; background-size: 100%; } </style>
如何变成灰色的呢？
有这几种方式，都是利用css3de filter这个滤镜属性。 （1） html { -webkit-filter: grayscale(100%); filter: progid:DXImageTransform.Microsoft.BasicImage(graysale=1); } （2） html { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: url("data:image/svg+xml;utf8,#grayscale"); filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(1); }
12 Vue中Vue.set()和this.$forceUpdate()的使用
1.给对象添加一个key值 失败的
<template> <div> <p>名称：{{userInfo.name}}</p> <p>性别是:{{userInfo.sex ? userInfo.sex : ''}}</p> <button @click="updateName">修改userInfo</button> </div> </template> <script> export default { data(){ return{ userInfo:{name:'小明'} } }, methods:{ updateName(){ this.userInfo['sex']='男';//失败的 } } } </script>
给对象添加一个key值 成功的
<template> <div> <p>{{userInfo.name}}</p> <p>{{userInfo.sex ? userInfo.sex : ''}}</p> <button @click="updateName">修改userInfo</button> </div> </template> <script> export default { data(){ return{ userInfo:{name:'小明'} } }, methods:{ updateName(){ this.userInfo.name='小红'; this.userInfo['sex']='男';//ok } } } </script>
3.好奇怪,为啥一个成功一个失败？
在什么情况下，直接给对象添加一个key值会失败？？？？？ 是在你直接给原来的对象上新增一个key值而且没有修改原来对象上的值如下 this.userInfo['sex']='男'; 这样的修改肯定会失败的哈 你新增key值的时候；并且改变了原来已经有的key的内容；这样你新增的key值就可以更改成功 this.userInfo.name=this.userInfo.name+"213"; this.userInfo['sex']='男';//ok 为啥会这样是因为： 因为受现代JS的限制，vue不能检测到对象属性的添加或删除。 vue不允许在已经创建的实例上动态添加新的根级响应式属性 不过可以使用Vue.set()方法将响应式属性添加到嵌套的对象上。
3.给对象添加key值的两种方式
<template> <div> <p>{{userInfo.name}}</p> <p>{{userInfo.sex ? userInfo.sex : ''}}</p> <button @click="updateName">修改userInfo</button> </div> </template> <script> import Vue from "vue" //Vue.set()的时候需要使用 export default { data(){ return{ userInfo:{name:'小明'} } }, methods:{ updateName(){ // this.userInfo['sex']='男'; //失败的 // 解决方法一：注意要引入Vue // Vue.set(this.userInfo, 'sex' ,'男') //解决办法二;不推荐因为消耗性能 this.userInfo['sex']='男'; this.$forceUpdate() } } } </script>
####### 4.forceUpdate的讲解
this.$forceUpdate()
它可以迫使Vue的实例重新渲染；
注意它仅仅影响实例本身以及插入插槽内的子组件；并不是所有的子组件
13 小小方法，这么牛
uni.previewImage({ current:0, urls: [mess.honorIcon],//['你的图片地址'] 必须是一个数组 });
