美文网首页
uni-app踩坑之路(二)

uni-app踩坑之路(二)

作者: 燃烧的土豆 | 来源:发表于2020-05-27 10:29 被阅读0次

    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

    相关文章

      网友评论

          本文标题:uni-app踩坑之路(二)

          本文链接:https://www.haomeiwen.com/subject/lumiahtx.html