效果图：
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
})
}