微信小程序使用scroll-view制作横向滑动滚动条

前端创新者

于 2024-03-29 10:16:46 发布

阅读量878

点赞数 4

文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/GDNLQ/article/details/137136291

版权

示例图

废话不多说，直接上代码

        <view style="display: flex;position: relative;">
          <scroll-view class="scroll-view_H" scroll-x="true" style="width: 100%" bindscroll="getleft">
            <view class="bottom">
              <view class="map_btn_bg">
                <view class="map_btn_font">1</view>
              </view>
              <view class="map_btn_bg">
                <view class="map_btn_font">2</view>
              </view>
              <view class="map_btn_bg">
                <view class="map_btn_font">3</view>
              </view>
              <view class="map_btn_bg">
                <view class="map_btn_font">4</view>
              </view>
              <view class="map_btn_bg">
                <view class="map_btn_font">5</view>
              </view>
              <view class="map_btn_bg">
                <view class="map_btn_font">6</view>
              </view>
              <view class="map_btn_bg">
                <view class="map_btn_font">7</view>
              </view>
              <view class="map_btn_bg">
                <view class="map_btn_font">8</view>
              </view>
            </view>
          </scroll-view>
          <!--滚动条部分-->
          <view class="slide">
            <view class='slide-bar'>
              <view class="slide-show" style="width:{{slideWidth}}rpx; margin-left:{{slideLeft<=1 ? 0 : slideLeft+'rpx'}};"></view>
            </view>
          </view>
        </view>


.scroll-view_H{
  white-space: nowrap;
  height: 230rpx;
}
.bottom {
  display: flex;
}
.map_btn_bg {
  width: 160rpx;
  height: 180rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 24rpx;
  flex-direction: column;
  flex-shrink: 0;
  background-color: #fff;
  margin-right: 20rpx;
}
.map_btn_font {
  font-size: 28rpx;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  color: #606060;
}
.slide{
  height: 20rpx;
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: 9999;
  margin-left: -50rpx;
 }
 .slide .slide-bar{
  width: 100rpx;
  margin:0 auto;
  height: 10rpx;
  background:#eee;
  border-radius: 8rpx;
 }
 .slide .slide-bar .slide-show{
  height:100%;
  border-radius: 8rpx;
  background-color: #00aeff;
 }

// 滑动比例计算
 slideWidth: '', //滑块宽
 slideLeft: 0, //滑块位置
 totalLength: '', //当前滚动列表总长
 slideRatio: '', //滑块比例
//加载页面时候执行getRatio方法进行计算
getRatio() {
  var _totalLength =  1440; //总长度（单个块宽度*总数）
  var _ratio = 100 / _totalLength * (750 / this.data.windowWidth); //滚动列表长度与滑条长度比例
  var _showLength = 750 / _totalLength * 100; //当前显示蓝色滑条的长度(保留两位小数)
  this.setData({
    slideWidth: _showLength,
    totalLength: _totalLength,
    slideRatio: _ratio
  })
},
//slideLeft动态变化
 getleft(e) {
   this.setData({
    slideLeft: e.detail.scrollLeft * this.data.slideRatio
   })
 },