来个可运行的个人开发微信小程序怎么盈利滚动条隐藏解决方案？

来源：蜘蛛抓取(WebSpider) 时间：2023-08-25 01:54 标签： 个人开发微信小程序怎么盈利
微信小程序隐藏滚动条_真机测试有效刚好有这个需求，在网上查了很多都是说在css文件里面加上这样的一段代码但是这种方法只在微信开发者工具上面有效，在真机测试上仍是没有效果::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
最终终于找到了解决方案，改成如下代码::-webkit-scrollbar {
display: none;
}
在微信开发者工具和真机测试上均可隐藏，实测有效
利用 css 3 的新特性 -webkit-scrollbar, 但是这种方式不兼容 火狐 和 IEHTML<view class="nav_data" >
<view v-for="(item,index) in navData" :key="index" class="nav_data_inner">
<view class="nav_item" @click="_clickNav(index)" :class="s_index == index ? 'active' : ''">
<text>{{item.name}}</text>
<view class="nav_item_border"></view>
</view>
</view>
</view>
CSS
.data_list::-webkit-scrollbar {
display: none;
}
.nav_data{
display: flex;
overflow-x: scroll;
scrollbar-width:none;
}
.nav_data_inner{
padding: 20rpx 10rpx;
padding-bottom: 6rpx;
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-start;
}
.nav_data .nav_item{
padding: 0 30rpx;
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 28rpx;
}
.nav_data .nav_item .nav_item_border{
width: 95%;
margin-top: 10rpx;
border-bottom: solid 4rpx rgba(0,0,0,0);
}
.nav_data .nav_item.active {
color: #f32c2e;
}
.nav_data .nav_item.active .nav_item_border{
border-bottom: solid 4rpx #f32c2e;
}
主要是这一块.data_list::-webkit-scrollbar {
display: none;
}
微信小程序scroll-view真机出现滚动条如何隐藏?scroll-view{
//scroll-view元素设置固定高度
height:159rpx;
overflow-y: hidden;
//x轴滚动
overflow-x: auto;
}
//最关键的
::-webkit-scrollbar{
width: 0;
height: 0;
color: transparent;
}
需要两个配合使用,亲测安卓真机有效~

我要回帖

更多关于 个人开发微信小程序怎么盈利 的文章

 

随机推荐