回顾上篇文章,我们聊到“美化微信小程序中的轮播效果”,如何巧妙的应用轮播效果,今天继续聊聊小程序。
刚刚做了个需求,遇到了坑,需要在小程序里做多个导航功能,达到设计师的效果。这个应用在APP里也很常见,毕竟屏幕只有那么宽,要放很多个导航标签,只能采用滚动,我们先来了解如何实现滚动。
首先跟PC和H5一样,我们必须在外部的标签加样式,例如:
WXML
<view class='cen-tabs-con'> <scroll-view scroll-x> <view id='{{index}}' class='cen-tabs-item {{currentTab == index ? "tabstadus":""}}' wx:for='{{tabs}}' wx:key="*this" bindtap='itemClick'>{{item}}</view> </scroll-view> </view>
我们实现向左滚动,首页到scroll-view滚动标签,向左滚动的话,我们加上属性scroll-x。来看下样式代码,如下:
WXSS
//外部box .cen-tabs-con{ position:relative; width:690rpx; font-size:0; height:90rpx; text-align:center; white-space:nowrap; overflow:hidden; } //元素item .cen-tabs-item{ display:inline-block; width:25%; line-height:1.6; font-size:32rpx; height:90rpx; color: #151515; }
注:跟PC和H5一样,外部BOX样式主要在于white-space:nowrap和overflow:hidden两个,强制不换行并且超出BOX隐藏,然后BOX内的元素并排display:inline-block(可用其他方法)。
然后在手机预览下效果,发现滚动的时候发现,跟PC和H5一样的问题:默认底部会有个实线的滚动条,如下图:
这个效果很难接受的,尤其是到了设计师和产品那,完全不能通过。我们知道,处理这个问题在PC和H5中一般比较麻烦,需要用到插件,或者写很多代码,但是在微信小程序里,我们只需要一段CSS代码就可以搞定,如下:
::-webkit-scrollbar { width: 0; height: 0; color: transparent; }
其实原理就是把滚动条的宽高都设置为0,颜色也没了,这样看上去就的效果就完美了。
不知道您有遇到这样的情况吗,赶紧去试一试吧。
你如果有更好的方法可以留言给我们,也可以加群讨论哟~~~~
网友评论文明上网理性发言 已有0人参与
发表评论: