微信小程序填坑之旅

一、解决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;
  }
 

 

猜你喜欢

转载自www.cnblogs.com/huangfeihong/p/9706658.html