Yabcer
Yabcer
  • 发布:2020-01-14 11:57
  • 更新:2022-01-07 09:46
  • 阅读:5044

nvue中使用scroll-view 横向滚动隐藏滚动条

分类:nvue

解决方案来至微信小程序官方的野路子。
就是在scroll-view上包裹一层高度小于scroll-view的view,但是我的滚动item有阴影边框,套一层底部还是有点问题,最后我套了两层完美解决。

不能上传演示视频,大家自己去试试


<template>  
  <view class="guide">  
    <scroll-view class="guide-item" scroll-x="true">  
      <view class="item" v-for="(item, index) in list" :key="index" :style="{ 'margin-right': index + 1 == list.length ? '0rpx' : '10rpx' }">  
        <view class="item-box">  
          {{ item.name }}{{ index }}  
        </view>  

      </view>  
    </scroll-view>  
  </view>  
</template>  

<script>  
export default {  
  props: { list: Array },  
  data() {  
    return {};  
  },  
  methods: {}  
};  
</script>  

<style lang="scss" scoped>  
$guide-height: 300rpx;  

.guide {  
  height: $guide-height;  
  overflow: hidden;  
  background-color: #007AFF;  
}  

.guide-item {  
  /* #ifndef APP-NVUE */  
  display: flex;  
  /* #endif */  
  flex-direction: row;  

}  
.item {  
  background-color: #fff;  
  width: 200rpx;  
  height: $guide-height + 30;  
  overflow: hidden;  
}  

.item-box {  
  background-color: #fff;  
  width: 200rpx;  
  height: $guide-height - 10;  
  border-radius: 20rpx;  
  box-shadow: 0 2rpx 8rpx 0 rgba(0, 0, 0, 0.06);  
}  
</style>  
0 关注 分享

要回复文章请先登录注册

善妒的蝎子

善妒的蝎子

回复 Ch3nm :
正解
2022-01-07 09:46
Ch3nm

Ch3nm

:show-scrollbar="false"
2021-03-17 14:23
3***@qq.com

3***@qq.com

<scroll-view class="flex_s guide pad_tb30" show-scrollbar="false" scroll-x="true" >
2020-05-12 23:01
1***@qq.com

1***@qq.com

先收藏了。今天遇到了这个问题,不清楚能不能解决,明天试试看。
2020-04-23 22:47
f***@126.com

f***@126.com

我也是这样处理这个滚动条的
2020-01-14 17:05