小程序开发遇到的问题及解决方法

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'