uni-app踩坑之路（二）

1.背景图的使用

          首先，要用背景图，高度是一定要设定的，但要完美兼容适配设计图的尺寸（99%），需要结合谷歌控制台去微调高度，关于尺寸单位，我这边有一点建议，使用css的单位vw,我想现在不少人员使用的最常见的移动端适配方式还是rem，rem的兴起要源于最初阿里的flexible，但是，这套适配方案已经被viewport所替代，详见github里lib-flexible，我现在写项目基本就是使用vw,vh+百分比，这里说一点，vw的最小尺寸尽量使用0.01vw，最好不要使用小数点后更多位的，至于为什么你自己拿真机调试就知道了。另外uniapp有自己的尺寸单位rpx，和设计图的比例是1:1，(750px的设计图)。尺寸的问题就说到这里，如果你有什么别的想法欢迎call me。

        进入正题，uni的背景图使用是~@/static/active/bgimg.png，图片一定要放static里，至于放别的行不行你可以试试，据我所知静态资源必须要使用static，对应相对路径，换成别的需要绝对路径，何必多此一举，另外注意一点，高度可以根据控制台微调，而且需要搭配background-size: contain;没有这个background-size图片显示会有问题。

背景图使用

        曲线救国的方法提供一个思路，父元素position:relative；图片元素position:absolute;z-index:0;这种方案需要其他子元素都加position:relative;z-index:1;

2.swiper组件使用

        这个使用在官方文档都有swiper组件使用，注意一点，一定要给外层的swiper设置高度，因为这个组件uni默认有高度，如果不设置会启用默认的。另外如果你想实现tab切换，就是上面几个标签，点击后下面swiper会左右滚动到相应的位置，滑动下面的上部tab标签也会相应改变，没错，就是你想象中的高大上的效果，那你需要的就是把上部tab和下部绑定起来，两个数组，保持长度一致，或者一个数组也可以，重要的是swiper的current和tab标签的选中current保持一致

上面有两个方法@tabclick和@change，都绑定有一个变量tabCurrentIndex，这个是关键点

事件方法

如果上面你还不懂，建议你去了解下vue，如果能看懂的话，按照上面的写法简单的tab切换就实现了。附件见代码附件，密码:zthk