1.display:flex 遇到white-space:nowrap
使用了flex布局,但是想让后面div里文字不换行,超出以点点表示时,这时布局就乱了,发现原来flex布局与white-space:nowrap有影响。
解决办法,父div设置 min-width:0 即可
2.如何实时计算textarea中的输入字数
<template>
<view class="complain_title_right">{{ conterNum }}/200</view>
<textarea @input="descInput" class="ta" maxlength="200" placeholder="请输入您的投诉内容(最多只能输入200个字)" v-model="textContent"/>
</template>
<script>
export default {
data() {
return {
textContent:""
}
},
methods: {
descInput(){
this.conterNum = this.textContent.length;
}
}
}
</script>
3.css3 渐变两个颜色 设置渐变颜色占比
background-image: linear-gradient( to bottom, #6486f6 30%, #fff);
4.小程序出现“根据 sitemap 的规则[0],当前页面 [pages/index/index] 将被索引”的警告
sitemap 的索引提示是默认开启的,如需要关闭 sitemap 的索引提示, 可在小程序项目配置文件 project.config.json 的 setting 中配置字段 checkSiteMap 为 false
5.组件之间的数据传递
Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据。必须使用特定的方法才能实现组件之间的数据传递。
- 父组件向子组件传递数据
子组件部分:
<template>
<view>{{name}}</view>
</template>
<script>
props:['name']
</script>
父组件部分:
<template>
<header :name="nameMsg"></header>
</template>
<script>
data(){
return{
nameMsg:"666"
}
},
components:{
header
}
</script>
- 子组件向父组件传递数据
子组件主要通过事件传递数据给父组件
子组件部分:
<template>
<input v-model="name" @change="setName"/>
</template>
<script>
data(){
return{
name:""
}
},
methods:{
setName(){
this.$emit('transName',this.name);
}
}
</script>
在 setName 中,使用了 $emit 来遍历 transName事件,并返回 this.name。其中 transName 是一个自定义的事件,功能类似于一个中转,this.username 将通过这个事件传递给父组件
父组件部分:
<template>
<header @transName="getName"></header>
<view>{{myname}}</view>
</template>
<script>
data(){
return{
myname:""
}
},
components:{
header
}
methods:{
getName(xx){
this.myname=xx;
}
}
</script>
- 子组件向子组件传递数据
方法一:设置globalData,获取用getApp().globalData
方法二:用Vuex
6.取消navigator点击效果
hover-class=“none”
7.多行未知高度文字的垂直居中
如果文字不确定,也可以用表格,表格里的td是可以让里面的行内元素垂直居中的
如果不想用表格,也可以用display:table-cell;属性,display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签,但是IE6/7不能识别。
还有一种就是不给父容器固定高度。
8.动态设置当前页面的标题
uni.setNavigationBarTitle({ title: '新的标题' });
uni.setNavigationBarColor({ frontColor: '#ffffff', backgroundColor: '#ff0000', animation: { duration: 400, timingFunc: 'easeIn' } })
9.如何获取上个页面传递的数据
在 onLoad
里得到,onLoad
的参数是其他页面打开当前页面所传递的数据
10.使用uni-app
内置的 Vuex
//store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {...},
mutations: {...},
actions: {...}
})
export default store
//main.js
...
import store from './store'
Vue.prototype.$store = store
const app = new Vue({
store,...
})
...
//test.vue 使用时:
import {mapState,mapMutations} from 'vuex'