前言
之前学过一段时间的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