微信小程序横向滑动实现

最新推荐文章于 2024-08-23 10:43:07 发布

锋少的技术博客

最新推荐文章于 2024-08-23 10:43:07 发布

阅读量1.9k

点赞数 1

分类专栏： HTML WEB WeChat 文章标签：微信小程序前端 javascript

本文链接：https://blog.csdn.net/feng2qing/article/details/127675463

版权

WEB 同时被 3 个专栏收录

19 篇文章 0 订阅

订阅专栏

HTML

14 篇文章 1 订阅

订阅专栏

WeChat

9 篇文章 0 订阅

订阅专栏

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="block{{index}} 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:{{slideWidth}}rpx; 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;
}