微信小程序 横向滑动实现

Posted 2023-02-24 锋少的技术博客

html代码

<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" wx:key="index">
                        <view class="blockindex block">
                            <view class="blockContent">
                                <text>第index + 1块内容</text>
                            </view>
                            <text style="margin-left: 20rpx;">第index + 1块内容</text>
                        </view>
                    </block>
                </view>
            </scroll-view>
            <!--滚动条部分-->
            <!-- <view class="slide" wx:if="slideShow">
                <view class='slide-bar'>
                    <view class="slide-show" style="width:slideWidthrpx; margin-left:slideLeft<=1 ? 0 : slideLeft+'rpx';"></view>
                </view>
            </view> -->
        </view>
    </view>

JS代码

Page(
  data: 
    // 滑动比例计算
    slideWidth: '', //滑块宽
    slideLeft: 0, //滑块位置
    totalLength: '', //当前滚动列表总长
    slideShow: false, //滑块是否显示
    slideRatio: '', //滑块比例
    // 渲染数据
    dataList: [
        text: '第1块'
      ,
        text: '第2块'
      , 
        text: '第3块'
      ,
        text: '第4块'
      ,
        text: '第5块'
      ,
        text: '第6块'
      ],
  ,
)

CSS代码

.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: 188rpx;
    height: 258rpx;
    padding: 0 0rpx;
    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;

实现效果