微信小程序橫向滾動
效果圖：
wxml：
<view class="box2">
<view class="box21">- 近期推薦 -</view>
<view class="hotService">
<view class="hotServiceList_box">
<!-- 這里為滾動的內(nèi)容部分 -->
<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}}級景區(qū)
</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: '', //當(dāng)前滾動列表總長
slideShow: false, //滑塊是否顯示
slideRatio: '', //滑塊比例
// 渲染數(shù)據(jù)
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; //當(dāng)前顯示藍(lán)色滑條的長度(保留兩位小數(shù))
this.setData({
slideWidth: _showLength,
totalLength: _totalLength,
slideShow: true,
slideRatio: _ratio
})
}
},
//slideLeft動態(tài)變化
getleft(e) {
this.setData({
slideLeft: e.detail.scrollLeft * this.data.slideRatio
})
}
浙公網(wǎng)安備 33010602011771號