uni-app中使用lodash_uniapp小知识-2

前言

  之前学过一段时间的unaipp，但是总是没有正式的拿他做过一些东西，现在开始实践，消化一下知识点。

---

开搞

  1.自定义标题栏

修改pages.json

自定义

  2.数组去重

var max = 24;var min = 0;var arr = new Array(max);for (var i = 0; i < max; i++) {    var k = parseInt(Math.random() * (max - min + 1)) + min; //用于指定生成某一范围内的随机数    arr.push(k + "");}var array = [];for (var k = 0; k < arr.length; k++) {    if (arr[k] !== undefined) {        if (!array.includes(arr[k])) {            array.push(arr[k]);        }    }}

  3.unaipp中标签的变化

div、ul、li 改成 view
span、font 改成 text
a 改成 navigator
image改成 cover-image
form、button、checkbox、radio、label、textarea、canvas、video 、input 这些还在。
select 改成 picker

  4.使用scroll-view标签出现的问题
    在使用scroll-view的时候想让它里面的东西横向滚动，可以使用scroll-x="true"，之后在css里面添加white-space: nowrap;可以让子组件不换行。但是问题出现了，当里面的view标签有字的时候会出现无论你怎么设置都不会使字换行，这样就要在那个子组件的css中加上white-space: normal;，就可以完美解决。

就像这样

  5.rpx和px
    学了unaipp才知道有 rpx这个尺寸，我在使用的过程中发现他俩的关系是1rpx = 1/2px。本来没注意，只是在h5和微信小程序适配的时候出现文字同样的尺寸34px在uniapp中看着还行，但是在小程序中要么太大，要么太小，怎么改都不行，于是乎就用了rpx，神奇的是竟然可以了！！！建议在使用尺寸的时候用rpx
  6.image和text垂直居中可以在图片上加上vertical-align: middle;
  7.uniapp用于非bar页面传输对象

//传送goToEvaluate(item) {   uni.navigateTo({       url: './evaluate?item=' + encodeURIComponent(JSON.stringify(item)),       success: (res) => {           console.log(res);       },       fail: (err) => {           console.log(err)       }   })}

//接收onLoad(option) {    var item = JSON.parse(decodeURIComponent(option.item));    this.custom = item}

  8.触摸事件(上下左右滑动)

data() {    return {        startData: {            clientX: 0,            clientY: 0        },     }},/*在methods中实现这两个方法*/start(e) {        var subY = e.changedTouches[0].clientY;//获取触摸的起始位置的纵坐标        var subX = e.changedTouches[0].clientX;//获取触摸的起始位置的横坐标        this.startData.clientX = subX;        this.startData.clientY = subY;},end(e) {    const subX = e.changedTouches[0].clientX - this.startData.clientX;    const subY = e.changedTouches[0].clientY - this.startData.clientY;    var suby = this.startData.clientY    var subx = this.startData.clientX    if (suby >= 243 && suby <= 405) {        if (subx >= 144 && subx <= 240) {            console.log("点击屏幕中间的部分")        }    }    if (subY > 50) {        console.log('上滑 ====>' + subY)        return;    } else if (subY < -50) {        console.log('下滑 ====>' + subY)        return;    } else {        if (subX > 50) {            console.log('右滑')            return;        } else if (subX < -50) {            console.log('左滑')            return;        } else {            console.log('就点了一下,不是中间,也没滑动')            return;        }    }}

  8.如果想让自己的项目在手机端，微信小程序端和h5通用，那么就要用到布局了，我推荐流式布局，display:flex;和flex-direction: row;
  9.unaipp在图片上有一个坑，它那个 cover-image不好用，不是在h5上出不来就是在手机端出不来。所以建议使用image