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.触摸事件(上下左右滑动)

<view class="chapter" @touchstart="start" @touchend="end"></view ><!--在想要实现滑动的标签上写上监听事件 touchstart和touchend 这是两个方法-->

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