一、解决scroll-view的滚动条问题
1、出现场景css、
有些场景下scroll-view是不需要滚动条的,比如顶部导航栏的横向滑动。而在单页的css样式中加入特定代码不能影响到全局的样式
2、解决方法
在微信小程序的全局css样式(app.wxss)中加入特定代码:
::-webkit-scrollbar {
//宽度为0
width: 0;
//高度为0
height: 0;
//颜色为透明
color: transparent;
}
3、示例代码
二、微信小程序fixed定位下scroll-view滚动失效
1、出现场景
想要将顶部导航栏已fixed的方式固定在页面的最上方,实现了fixed定位后,却同时出现了scroll-view失效的bug,即顶部导航栏不能滑动了。
2、解决方法
scroll-view元素的父元素的css属性width:100%即可解决。(该父元素的position属性值应为fixed)
3、示例代码
html代码:
<!-- 顶部导航栏频道信息 -->
<div class="topNav">
<scroll-view class="scrollTitle" :scroll-x="true" :scroll-with-animation="1000" >
<p class="navAll">全部直播</p>
<div v-for="item in topNav" :key="index" class="scrollContent">
<p class="navTitle">{{item.name}}</p>
</div>
</scroll-view>
</div>
css代码:
/* 频道信息样式 */
.content{
margin-top:70rpx;
}
.topNav {
//解决方法
position: fixed;
width: 100%;
top:0;
background-color: white;
z-index: 1;
}
.scrollTitle {
white-space: nowrap;
display: flex;
margin-bottom: 5rpx;
}
.scrollContent {
display: inline-block;
margin: 0;
}
.navAll {
float: left;
font-size: 0.3rem;
margin: 9rpx 24rpx 0 6rpx;
}
.navTitle {
font-size: 0.3rem;
margin-right: 24rpx;
}
扫描二维码关注公众号,回复:
3360215 查看本文章