居家隔离14-1
继续年前的学习总结
class 支持的语法:
<view :class="{ active: isActive }">111</view> <view class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }">222</view <view class="static" :class="[activeClass, errorClass]">333</view> <view class="static" v-bind:class="[isActive ? activeClass : '', errorClass]">444</view> <view class="static" v-bind:class="[{ active: isActive }, errorClass]">555</view>
style 支持的语法:
<view v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">666</view> <view v-bind:style="[{ color: activeColor, fontSize: fontSize + 'px' }]">777</view>
不支持 Vue官方文档：Class 与 Style 绑定 中的 classObject 和 styleObject 语法。此外还可以用 computed 方法生成 class 或者 style 字符串，插入到页面中，举例说明：
<template> <!-- 支持 --> <view class="container" :class="computedClassStr"></view> <view class="container" :class="{active: isActive}"></view> <!-- 不支持 --> <view class="container" :class="computedClassObject"></view> </template>
外部CSS引入
第一种方法：放在<script>标签里里的写法
<script>import '../static/style/reset.css'</script>
注意：要放在<script>标签里引入才生效，放在<style>标签内还不行，很奇怪。。。。
我用的是这种
<script>
import './css.css'
export default {
data() {
return {};
}
}
</script>第二种方法：放在<style>标签里的写法
<style>
@import url("index.css");
</style>
下面是两张方法一起用的实例，两种方式引入的CSS都可以生效！~大家看着哪个顺眼就用哪个吧
<template>
<view>
<text class="css1">测试文本1111</text><br>
<text class="css2">测试文本2222</text>
</view>
</template>
<script>
import './css1.css'
export default {
data() {
return {};
}
}
</script>
<style>
@import url("./css2.css");
</style>样例实测
<template>
<view class="content">
这里是类别
<scroll-view class="menus">
<view v-for="(menu, index) in menus" :id="'view'+index" :class="[index == currentIndex ? 'menuActive' : '']" @click="selword(index)"
@tap="seltag">{{menu}}
<view id="test123" style="width: 50px;background-color: #0000FF;" ></view>
</view>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
title: '这里是分类信息页面....',
currentIndex: 0,
menus: [
'新闻0', '汽车0', '读书0',
'新闻1', '汽车1', '读书1',
'新闻2', '汽车2', '读书2',
'新闻3', '汽车3', '读书3',
]
}
},
onLoad: function(options) {
console.log("onLoad");
},
onHide: function() {
console.log("onHide");
},
onShow: function() {
console.log("onShow");
},
methods: {
selword: function(item) {
// console.log('点击index=' + item);
this.currentIndex = item;
},
seltag:function(e){
console.log('当前点击='+e.currentTarget.id);
// 推荐使用 e.currentTarget 这个更准
console.log('点击='+e.target.id);
}
}
}
</script>
<style>
.content {
text-align: center;
height: 400upx;
}
.logo {
height: 200upx;
width: 200upx;
margin-top: 200upx;
}
.title {
font-size: 36upx;
color: #0000ff;
}
.menus {
width: 100%;
margin: 0 auto;
padding: 20px 0px;
}
.menus view {
padding: 18px;
line-height: 20px;
font: 16px;
float: left;
}
.menuActive {
color: #900;
font-size: 36px;
}
</style>
效果：
事件说明：
事件映射表，左侧为 WEB 事件，右侧为 ``uni-app`` 对应事件
{ click: 'tap', touchstart: 'touchstart', 点击开始 touchmove: 'touchmove', 移动 touchcancel: 'touchcancel', 取消 touchend: 'touchend', 点击结束 tap: 'tap', longtap: 'longtap', 长按 input: 'input', change: 'change', submit: 'submit', blur: 'blur', focus: 'focus', reset: 'reset', confirm: 'confirm', columnchange: 'columnchange', linechange: 'linechange', error: 'error', scrolltoupper: 'scrolltoupper', scrolltolower: 'scrolltolower', scroll: 'scroll' }
在 input 和 textarea 中 change 事件会被转为 blur 事件。
踩坑注意(PS 这部分还么有测试实践过)：
上列表中没有的原生事件也可以使用，例如map组件的regionchange 事件直接在组件上写成 @regionchange,同时这个事件也非常特殊，它的 event type 有 begin 和 end 两个，导致我们无法在handleProxy 中区分到底是什么事件，所以你在监听此类事件的时候同时监听事件名和事件类型既 <map @regionchange="functionName" @end="functionName" @begin="functionName"><map>
平台差异所致，bind 和 catch 事件同时绑定时候，只会触发 bind ,catch 不会被触发，要避免踩坑。
事件修饰符
stop 的使用会阻止冒泡，但是同时绑定了一个非冒泡事件，会导致该元素上的 catchEventName 失效！
prevent 可以直接干掉，因为uni-app里没有什么默认事件，比如 submit 并不会跳转页面
self 没有可以判断的标识
once 也不能做，因为uni-app没有 removeEventListener, 虽然可以直接在 handleProxy 中处理，但非常的不优雅，违背了原意，暂不考虑
按键修饰符：uni-app运行在手机端，没有键盘事件，所以不支持按键修饰符
来源：oschina
链接：https://my.oschina.net/qingqingdego/blog/3167154