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

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

刚刚做了个需求，遇到了坑，需要在小程序里做多个导航功能，达到设计师的效果。这个应用在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，颜色也没了，这样看上去就的效果就完美了。

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

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

标签：元素效果程序Webitemview