×

微信小程序之坑:使用scroll-view模拟元素item滚动效果

作者:Terry2019.03.27来源:Web前端之家浏览:19128评论:0

500.jpg

回顾上篇文章,我们聊到“美化微信小程序中的轮播效果”,如何巧妙的应用轮播效果,今天继续聊聊小程序。

刚刚做了个需求,遇到了坑,需要在小程序里做多个导航功能,达到设计师的效果。这个应用在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一样的问题:默认底部会有个实线的滚动条,如下图:

image.png

这个效果很难接受的,尤其是到了设计师和产品那,完全不能通过。我们知道,处理这个问题在PC和H5中一般比较麻烦,需要用到插件,或者写很多代码,但是在微信小程序里,我们只需要一段CSS代码就可以搞定,如下:

::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}

其实原理就是把滚动条的宽高都设置为0,颜色也没了,这样看上去就的效果就完美了。

不知道您有遇到这样的情况吗,赶紧去试一试吧。

你如果有更好的方法可以留言给我们,也可以加群讨论哟~~~~

您的支持是我们创作的动力!
温馨提示:本文作者系Terry ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/xiaochengxuq84098209482148.html

网友评论文明上网理性发言 已有0人参与

发表评论: