微信小程序scroll-view显示滚动条

试过网上的直接修改样式的方法不行,自己写一个滚动条定位上去

 <scroll-view class="expired-battery" scroll-y @scrolltolower="scrolltolower" @scroll="scroll">
    <div class="scroll-bar"
      :style="'height:' + scrollBarHeight + 'px; top:' + scrollBarTop + 'px; display:' + (flagShow ? 'block' : 'none')">
    </div>
    <expired-card ></expired-card>
  </scroll-view>
    data() {
    return {
      expiredBatteryList: [{},{},{}],
      scrollBarHeight: 50,
      scrollBarTop: 10,
      contentHeight: 512,
      flagShow: true
    };
  },
   mounted() {
    // 获取商户库存统计
    this.getOverBattery()
  },
   getOverBattery() {
          this.flagShow = this.expiredBatteryList.length > 2 ? true :false 
    },
scroll(event) {
      const { scrollTop, scrollHeight } = event.detail;
      const ratio = 256 / scrollHeight; // 计算内容可视区域与内容高度的比例
      this.scrollBarHeight = 256 * ratio; // 计算滚动条的高度
      this.scrollBarTop = scrollTop; // 计算滚动条的位置
    },

<style scoped lang="scss">
.expired-battery {
  max-height: 512rpx;

  .scroll-bar {
    position: absolute;
    top: 0;
    height: 50px;
    right: 10rpx;
    z-index: 9999;
    border-radius: 3px 3px 3px 3px;
    /* 定义在滚动条父容器的右侧 */
    width: 10rpx;
    background-color: #D9D9D9;
  }
}
</style>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值