每日前端
大道至简

微信小程序scrollview隐藏滚动条

<scroll-view scroll-x=’true’ class=’nav-scroll’>
<buttonclass=”nav-item font-40 font-bold color-primary {{currentTabId == item.channel_id ? ‘active’ : ”}}”wx:for=”{{tabList}}”wx:key=”{{key}}”data-id=”{{item.channel_id}}”data-index=”{{index}}”bindtap=”changeTab”>
{{item.channel_name}}
</button>
</scroll-view>
.nav-scroll {
display:flex;
padding-right:22rpx;
white-space:nowrap;
background-color: #fff;
width:100%;
height:78rpx;
box-sizing:border-box;
}
::-webkit-scrollbar {
width:0;
height:0;
color:transparent;
}
.nav-item {
position:relative;
display:inline-block;
height:60rpx;
padding:06rpx4rpx6rpx;
border-bottom:6rpxsolid #fff;
margin-right:36rpx;
border-radius:0;
background-color: #fff;
}
.nav-item.active {
color: #f2363c !important;
border-bottom:6rpxsolid #f2363c;
}
未经允许不得转载:每日前端 » 微信小程序scrollview隐藏滚动条
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

一个更全的前端开发资源库

立即前往