微信小程序?qū)崿F(xiàn)橫向滾動條

更新時間：2022年06月30日 10:53:39 作者：念嶼北詩°

這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)橫向滾動條，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了微信小程序橫向滾動條的具體代碼，供大家參考，具體內(nèi)容如下

微信小程序scroll-view實現(xiàn)橫向滑動滾動

效果圖如下：

左右滑動效果展示如下：

實現(xiàn)代碼：

index.wxml

<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}}" wx:key="{{index}}">
?? ??? ??? ??? ??? ??? ?<view class="block{{index}} block">
?? ??? ??? ??? ??? ??? ??? ?<view class="blockContent">
?? ??? ??? ??? ??? ??? ??? ??? ?<text>第{{index + 1}}塊內(nèi)容</text>
?? ??? ??? ??? ??? ??? ??? ?</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>

index.js

const app = getApp()

Page({
? data: {
? ? // 滑動比例計算
? ? slideWidth: '', //滑塊寬
? ? slideLeft: 0, //滑塊位置
? ? totalLength: '', //當(dāng)前滾動列表總長
? ? slideShow: false, //滑塊是否顯示
? ? slideRatio: '', //滑塊比例
? ? // 渲染數(shù)據(jù)
? ? dataList: [{
? ? ? ? text: '第1塊'
? ? ? },{
? ? ? ? text: '第2塊'
? ? ? }, {
? ? ? ? text: '第3塊'
? ? ? },{
? ? ? ? text: '第4塊'
? ? ? },{
? ? ? ? text: '第5塊'
? ? ? },{
? ? ? ? text: '第6塊'
? ? ? }],
? },
? onLoad: function () {
? ? // 這里是獲取視口口寬度
? ? 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.length * 173; //分類列表總長度
? ? ? var _ratio = 80 / _totalLength * (750 / this.data.windowWidth); //滾動列表長度與滑條長度比例
? ? ? var _showLength = 750 / _totalLength * 80; //當(dāng)前顯示藍色滑條的長度(保留兩位小數(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
? ? })
? },

})

index.wxss

.hotService{
? width: 100%;
? height: 300rpx;
? background-color: #fff;
? padding: 0 26rpx;
? box-sizing: border-box;
}
.hotServiceList_box {
? position: relative;
? overflow: hidden;
? white-space: nowrap;
? width: 100%;
}

.block {
? width: 158rpx;
? height: 158rpx;
? padding: 0 10rpx;
? display: inline-block;
?
}
.blockContent{
? width: 100%;
? height: 100%;
? background-color: rgb(101, 203, 243);
? color:#fff;
? display: flex;
? justify-content: center;
? align-items: center;
}

.block:first-child {
? padding: 0 15rpx 0 0;
}
.slide{
? height: 20rpx;
? background:#fff;
? width:100%;
? padding:14rpx 0 5rpx 0
?}
?.slide .slide-bar{
? width: 80rpx;
? margin:0 auto;
? height: 10rpx;
? background:#eee;
? border-radius: 8rpx;
?}
?.slide .slide-bar .slide-show{
? height:100%;
? border-radius: 8rpx;
? background-color: #00aeff;
?}

index.json