微信小程序横向滚动

             效果图：    

 

 wxml：

<view class="box2">

<view class="box21">-  近期推荐  -</view>

<view class="hotService">

    <view class="hotServiceList_box">

    <!-- 这里为滚动的内容部分 -->

            <scroll-view class="hotServiceList_scroll" scroll-x="true" bindscroll="getleft">

                <view class="hotService_content">

                    <block wx:for="{{dataList.tuijian}}" wx:key="{{index}}">

                        <view class="block">

                            <view class="blockContent">

                                <image src="{{item.imgurl}}" alt="widthFix"/>

                            </view>

                            <view class="text1">

                            {{item.title}}

                            </view>

                            <view class="text1 text2">

                           {{item.raxtext1}}级景区

                            </view>

                        </view>

                    </block>

                </view>

            </scroll-view>

        <!--滚动条部分-->

        <view class="slide" wx:if="{{slideShow}}">

            <view class='slide-bar'>

                <view class="slide-show" style="width:{{slideWidth}}rpx; margin-left:{{slideLeft<=1 ? 0 : slideLeft+'rpx'}};"></view>

            </view>

        </view>

    </view>

</view>

</view>

wxss：

.box2{

  height: 600rpx;

  margin-top: 50rpx;

  box-sizing: border-box;

}

.box21{

  height: 100rpx;

  border-bottom: 1px solid #eee;

  line-height: 100rpx;

  text-align: center;

  font-weight: bold;

}

.hotServiceList_box {

  position: relative;

  overflow: hidden;

  white-space: nowrap;

  width: 100%;

}

 

.block {

  width: 258rpx;

  height: 258rpx;

  padding: 10rpx 10rpx 140rpx 0;

  display: inline-block;

  margin-top: 20rpx;

  margin-left: 10rpx;

}

.block image{

  width: 100%;

  height: 100%;

}

.blockContent{

  width: 100%;

  height: 100%;

  display: flex;

  justify-content: center;

  align-items: center;

}

.slide{

  height: 20rpx;

  background:#fff;

  width:100%;

  padding:14rpx 0 5rpx 0

 }

 .slide .slide-bar{

  width: 100%;

  height: 10rpx;

  background:#eee;

  border-radius: 8rpx;

 }

 .slide .slide-bar .slide-show{

  height:100%;

  border-radius: 8rpx;

  background-color: #00aeff;

 }

 .text1{

   width: 258rpx;

   height: 50rpx;

   text-align: center;

   line-height: 80rpx;

   font-size: small;

 }

 .text2{

   color: red;

 }

js：

//引入

var tuijian=require('../../utils/dataList.js')

data: {

 // 滑动比例计算

    slideWidth: '', //滑块宽

    slideLeft: 0, //滑块位置

    totalLength: '', //当前滚动列表总长

    slideShow: false, //滑块是否显示

    slideRatio: '', //滑块比例

    // 渲染数据

    dataList: [ ],

},

onLoad() {

   this.setData({

    dataList:tuijian

   })

     // 这里是获取视口口宽度

     var systemInfo = wx.getSystemInfoSync();

     this.setData({

       windowWidth: systemInfo.windowWidth,

     })

     this.getRatio()

  },

  getRatio() {

    if (this.data.dataList.length < 4) {

      this.setData({

        slideShow: false

      })

    } else {

      var _totalLength = this.data.dataList.tuijian.length * 173; //分类列表总长度

      var _ratio = 480 / _totalLength * (750 / this.data.windowWidth); //滚动列表长度与滑条长度比例

      var _showLength = 750 /2; //当前显示蓝色滑条的长度(保留两位小数)

      this.setData({

        slideWidth: _showLength,

        totalLength: _totalLength,

        slideShow: true,

        slideRatio: _ratio

      })

    }

  },

  //slideLeft动态变化

  getleft(e) {

    this.setData({

      slideLeft: e.detail.scrollLeft * this.data.slideRatio

    })

  }